在這個工作示例中，AngularJS如何知道檢查/觸發'isToggled'條件？

我正在學習angularjs中的一些基礎知識，而且我偶然偶然發現了一種可行的模式，但我不知道爲什麼。也不確定我是否以'角度最佳實踐'的方式進行。這個例子大大簡化了我真正的工作，但一般的概念是相同的：基於父母的開關設置兒童的可見性在這個工作示例中，AngularJS如何知道檢查/觸發'isToggled'條件？

這似乎是我角度天真的自我，它必須以某種方式觀看使用toggledGroups數組然後???的函數。條件ng-show確實工作，我只是不明白爲什麼ng-show="isToggled(group)"得到重新評估，因爲我正在修改的陣列不在$scope。

做$scope GET存在的所有功能，在每個$digest重新評估？如果是這樣，這對我來說似乎可能會在大數據集上造成ng-repeats瓶頸。
正如我上面提到的那樣，這是一種可以接受的模式，還是有更好/更有角度的方式，我應該考慮這種交互作用？

JS：

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

app.service('TransportationService', function(){ 
    var groups = [{ 
     group: "planes", 
     items: ["Airbus A300", "Extra 300S", "Stearman"] 
    }, { 
     group: "trains", 
     items: ["Flying Scotsman", "The Rocket", "Silver Streak"] 
    }, { 
     group: "automobiles", 
     items: ["Veyron", "Vanquish", "FF", "Continental GT"] 
    }]; 

    return { 
     groups: groups 
    } 
}); 

app.controller('TransportationController', ['$scope', 'TransportationService', function($scope, ts){ 
    var toggledGroups = []; 

    function isToggled(group) { 
     return toggledGroups.indexOf(group) > -1; 
    } 

    function toggleGroup(group) { 
     var index = toggledGroups.indexOf(group); 
     if (index > -1) { 
      toggledGroups.splice(index, 1); 
     } else { 
      toggledGroups.push(group); 
     } 
    } 

    $scope.groups = ts.groups; 
    $scope.isToggled = isToggled; 
    $scope.toggleGroup = toggleGroup; 
}]);

HTML：

<div ng-app="demo" ng-controller="TransportationController"> 
    <div ng-repeat="group in groups"> 
     <h3>{{group.group}}</h3> 
     <button ng-click="toggleGroup(group)">Toggle</button> 
     <ul ng-show="isToggled(group)"> 
      <li ng-repeat="item in group.items">{{item}}</li> 
     </ul> 
    </div> 
</div>

小提琴：http://jsfiddle.net/wpHZg/1/

來源

2014-06-13 BLSully

你指的是哪條條件陳述被重新評估？ –

'isToggled（group）'。對不起，我措辭不佳 – BLSully

我把一些console.log的isToggled函數，注意到它每次調用它奇怪的6倍... –

你的假設是正確的。每當摘要循環開始時，它就執行該功能。你也是正確的，因爲它更昂貴。貴多少錢？取決於你的數據集的大小。從你所展示的邏輯來看，我無法想象它對CPU來說太難了，但是你應該考慮它將會堆積在你所有其他應用程序邏輯上的事實。從我看到的方式來看，您可以採取2個操作步驟來減輕客戶端CPU的負載。

1）簡單：一個切換屬性添加到您的組：

$scope.toggleGroup = function(group) { 
    group.toggled = !group.toggled 
}; 

<ul ng-if="group.toggled"></ul>

2）更復雜：允許一些乾燥，使一個指令！：D

app.directive('toggler', function() { 
    return { 
    restrict: 'A', 
    link: function(scope, elem) { 
     elem.find('.button-toggler').on('click', function() { 
     elem.find('.togglee').toggle(); 
     }); 
    } 
    }; 
}); 

<div toggler=""> 
    <button class="button-toggler">Toggle Me Hard!</button> 
    <ul class="togglee" style="display:none"></ul> 
</div>

第二個允許您將指令輕鬆傳輸到代碼的其他部分。它也不會啓動一個摘要循環，因爲它全部基於jQuery（在這種情況下，這是很好的，因爲您沒有在點擊時更改任何範圍數據）。無論哪種方式，你將有一個更清潔的應用程序。

來源

2014-06-13 15:50:40 Mike

還記得在你的ng-repeat中使用'track by'。它減少了應用程序在DOM上執行的重新渲染量。 – Mike

另外，儘可能使用ng-if代替ng-show。 –

沒錯，@AbhishekJain – Mike

在這個工作示例中，AngularJS如何知道檢查/觸發'isToggled'條件？

回答

相關問題