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>