2017-02-20 40 views
0

我检索所有数据并将其存储在变量“storedata”中,将其显示在与角度控制器关联的HTML视图“A”中,我正在使用thymeleaf模板,但是在点击ID时,我想在另一个HTML视图“B”中显示内容,我想使用其中已有数据的变量“storedata”。所以我尝试将HTML视图“B”与相同的角度控制器链接起来,以为我可以直接访问它,但是我不能。你的建议很有价值。所有文件都粘贴在下面。将数据从一个HTML传递到另一个HTML都使用相同的角度控制器onClick

HTML “A”

<div data-ng-repeat="storedata in storeDataModel"> 
     <a class="clickableRow" title="Click to get User details" onclick="window.open('B.html')" >{{storedata.ID}} 
    </a> 
</div> 

HTML “B”

<div ng-controller="angularController"> 
<a> HELLO WORLD..!! {{storedata.ID}}</a> 
</div> 
+0

你应该使用一个服务这样的事情,因为更改视图将初始化控制器的新实例是不带'storedata '变量 – DGarvanski

+0

哦好吧,不知道它会创建一个角度控制器的新实例,谢谢。 –

回答

0

没有自举也不能加载另一个视图。通过调用窗口。打开,你只加载一个与你正在使用的角度应用程序无关的html文件。 欲了解更多信息,请看angular bootstrapping.

另一种方法是使用ng-routeui-router。我建议后者。

例如看看下面的代码:

angular.module('app', ['ui.router']) 
 
    .config(function($stateProvider, $urlRouterProvider) { 
 

 
    // State definition 
 
    $stateProvider 
 
     .state('homeState', { 
 
     abstract: true, 
 
     url: '/home', 
 
     template: '<div> {{ title }} ' + 
 
      '<div ui-view><div>' + 
 
      '</div>', 
 
     controller: 'HomeController' 
 
     }) 
 
     .state('homeState.childStateA', { 
 
     url: '/stateA', 
 
     template: '<div> {{ data }} </div>' + 
 
      '<button data-ng-click="$state.go(\'homeState.childStateB\')"> Click Me To GoTo StateB </button>', 
 
     controller: 'StateAController' 
 
     }) 
 
     .state('homeState.childStateB', { 
 
     url: '/stateB', 
 
     template: '<div> {{ data }} </div>' + 
 
      '<button data-ng-click="$state.go(\'homeState.childStateA\')"> Click Me To GoTo StateA </button>', 
 
     controller: 'StateBController' 
 
     }); 
 

 
    // Default to stateA 
 
    $urlRouterProvider.otherwise('/home/stateA'); 
 
    }) 
 
    .run(function($rootScope, $state, $stateParams) { 
 
    $rootScope.$state = $state; 
 
    $rootScope.$stateParams = $stateParams; 
 
    }) 
 
    .controller('HomeController', function($scope) { 
 
    // homeState data 
 
    $scope.title = 'State example'; 
 
    }) 
 
    .controller('StateAController', function($scope) { 
 
    // StateA data 
 
    $scope.data = 'Hi State A'; 
 
    }) 
 
    .controller('StateBController', function($scope) { 
 
    // StateB data 
 
    $scope.data = 'Hi State B'; 
 
    })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script> 
 

 
<div data-ng-app="app"> 
 
    <div ui-view></div> 
 
</div>

相关问题