AngularJS - 如何让内部控制器

Question

的ngRepeat过滤结果引用我使用的是NG重复指令与过滤器，像这样：

<tr ng-repeat="entry in (filteredEntries = (entries | filter:hasGroup | filter:readingFilter | orderBy:data.sortType:data.sortReverse:true))"></tr> 
    <span>{{filteredEntries.length}}</span> 

我使用$ stateProvider加载视图和控制器

  $stateProvider 
      .state('welcome', { 
       url: "/", 
       templateUrl: viewsPrefix + "welcome.html", 
       data: { 
        pageTitle: 'Welcome' 
       }, 
       controller: "WelcomeCtrl" 
      }) 
      .state('data', { 
       url: "/data", 
       templateUrl: viewsPrefix + "data.html", 
       data: { 
        pageTitle: 'Data' 
       }, 
       controller: "DataCtrl", 
      }) 

这里是我的控制器的一个片段：

.controller('DataCtrl', ['$scope', '$rootScope', '$state', '$translate', '$filter') { 
$scope.filteredEntries = []; 
$scope.entries = [1, 2, 3, 4, 5, 6,7]; 
$scope.hasGroup = function(){return true;} 
$scope.readingFilter = function(){return true;} 
setInterval(function() { 
    console.log($scope.filteredEntries); 
}, 500); 
}); 

这样的代码没有问题，但是我需要使用$scope.filteredEntries访问我的控制器中的filteredEntries属性，这应该没问题。不幸的是，这不起作用，我无法弄清楚为什么会发生这种情况。

Answer 1

您可以使用此方法访问两个视图和控制器的过滤数组：

var app = angular.module('test', []); 
 

 
app.controller('MainCtrl', function() { 
 
    var vm = this; 
 
    vm.people = ['fox', 'rosi', 'err3', 'rob', 'cesar', 'geoff']; 
 
    
 
    vm.logPeople = function() { 
 
    console.log("FILTERED PEOPLE: ", vm.filteredPeople); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script> 
 
<div ng-app="test"> 
 
    <div ng-controller="MainCtrl as vm"> 
 
    <h2>List of people</h2> 
 
    Search: <input type="text" ng-model="search"> 
 
    <ul> 
 
     <li ng-repeat="person in vm.filteredPeople = (vm.people | filter:search)"> 
 
     {{person}} 
 
     </li> 
 
    </ul> 
 
    <p ng-hide="vm.filteredPeople.length">There is no result</p> 
 
    
 
    <button ng-click="vm.logPeople()">LOG PEOPLE</button> 
 
    <br><br> 
 
    Number of filtered people: {{vm.filteredPeople.length}} 
 
    </div> 
 
</div>

更新与更新代码的例子。

因此，在数据路径的状态提供，加上 “controllerAs： '虚拟机'，”：

.state('data', { 
     url: "/data", 
     templateUrl: viewsPrefix + "data.html", 
     data: { 
      pageTitle: 'Data' 
     }, 
     controllerAs: 'vm', 
     controller: "DataCtrl", 
    }) 

然后，在你的控制器：

.controller('DataCtrl', ['$scope', '$rootScope', '$state', '$translate', '$filter') { 
var vm = this; 

vm.filteredEntries = []; 
vm.entries = [1, 2, 3, 4, 5, 6,7]; 
vm.hasGroup = function(){return true;} 
vm.readingFilter = function(){return true;} 

vm.logEntries = function() { 
    console.log("FILTERED Entries: ", vm.filteredEntries); 
} 

}); 

最后，在你的模板（添加的按钮来测试记录的条目）：

{{filteredEntries.length}}

<button ng-click="vm.logEntries()">LOG Entries</button> 
<br><br>