Question

我在angularjs中学习了一些基础知识，并且我偶然偶然发现了一个有效的模式，但我不确定为什么。我也不确定我是否会采用角度最佳实践做法。一种方式。这个例子比我真正的工作大大简化，但一般概念是相同的：根据父母的切换设置儿童的可见性

在我的角度天真的自我看来，它必须以某种方式观察使用toggledGroups数组然后???的函数。有条件的ng-show 确实有效，我真的不明白为什么ng-show="isToggled(group)"会被重新评估，因为我修改的数组不是{＆1;}。 t $scope。

$scope上存在的所有函数是否都会在$digest上重新评估？如果是这样，我认为这可能会导致ng-repeats对大型数据集造成瓶颈。
正如我上面所提到的，这是一种可接受的模式还是更好/更有棱角的＆＃39;我应该考虑这种互动吗？

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/

Answer 1

您的假设是正确的。每次摘要周期开始时，它都会执行该功能。你也是正确的，因为它更贵。多贵多少钱？取决于您的数据集的大小。从你展示的逻辑来看，我无法想象它在CPU上会太难，但是你应该考虑它将会堆积在你所有其他应用程序逻辑上的事实。从我看到的方式来看，您可以采取两个操作过程来减少客户端CPU的负载。

1）easy：向您的群组添加切换属性：

$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（在这种情况下是好的，因为你没有在点击时改变任何范围数据）。无论哪种方式，你都会有一个更清洁的应用程序。

在这个工作示例中，AngularJS如何知道检查/触发'isToggled'条件？

1 个答案: