AngularJs。在指令中更改模型太慢

Question

作爲AngularJs中的新手無法理解問題。

這是一個顯示動作的簡單示例。實際上約50個項目，點擊「沒有字符串」後點擊元素「字符串＃」以視覺上刪除該項目大約需要1-2秒。

Fiddle

我的控制器代碼：

testApp.controller('TestController', ['$scope', function ($scope) { 

    $scope.category = [ 
     {id:1, name: "Category 1"}, 
     ... 
    ]; 

    $scope.items = [ 
     {id: 1, category: {id: 1},name: "Test 1"}, 
     ... 
    ]; 

    $scope.list = [ 
     {id: 1,name: "String 1"} 
     ... 
    ]; 

    angular.forEach($scope.category, function(categoryItem, i) { 
     categoryHash[categoryItem.id] = i; 
    }); 

    angular.forEach(menuItems, function(item) { 
     var catCategory = categoryHash[item.category.id]; 
     if (!$scope.category[catCategory].items) { 
     $scope.category[catCategory].items = []; 
     } 
     $scope.category[catCategory].items.push(item); 
    }); 

}]) 

指令代碼：

.directive('listItems', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      listArray: '=', 
      listItemId: '=', 
      listFlag: '=' 
     }, 
    template: '<ul>' + 
     '<li ng-repeat="listStr in listArray track by listStr.id">' + 
     '<input type="radio" ' + 
      'id="list_{{ listItemId }}_{{ listStr.id }}" name="list_{{ listItemId }}" ' + 
      'ng-model="$parent.$parent.item.string" ng-value="listStr" ng-change="stringSelect()">' + 
     '<label for="list_{{ listItemId }}_{{ listStr.id }}" ng-bind="listStr.name"></label>' + 
     '</li>' + 
     '<li>' + 
     '<input type="radio" ' + 
       'id="list_{{ listItemId }}_0" name="list_{{ listItemId }}" ' + 
       'ng-model="$parent.$parent.item.string" ng-value="" ng-change="stringSelect()">' + 
     '<label for="list_{{ listItemId }}_0">Without string</label>' + 
     '</li>' + 
    '</ul>', 
    link: function(scope, iElement, iAttrs) { 
     scope.stringSelect = function() { 
      scope.listFlag = false; 
     }; 
    } 
    } 
}) 

模板：

<div ng-app="test" ng-controller="TestController"> 
    <div ng-repeat="collection in category track by $index" > 
    <h3 ng-bind="collection.name"></h3> 
    <ul> 
    <li ng-repeat="item in collection.items track by $index"> 
     <strong ng-bind="item.name"></strong> 
     <span ng-if="item.string" ng-bind="item.string.name"></span> 
     <button ng-click="addString = true" ng-hide="addString">Add String</button> 
     <div ng-if="addString"> 
     <list-items 
        list-array="list" 
        list-item-id="$parent.item.id" 
        list-flag="$parent.addString"></list-items> 
     </div> 
    </li> 
    </ul> 
    </div> 
</div> 

Answer 1

首先刪除所有$父母，他們是不需要ed，angular將自己在初始範圍內尋找值，如果您的指令在其他指令中使用，這甚至不會指向正確的範圍。

第二與角度，你可以創造出很多的手錶，這真的可以放慢您的應用程序：

當名單的角度看，他看的深度檢測
1. 。當你有一些複雜對象的列表時，這可能會變慢。
2. 當您使用{{}}或NG綁定，它創建了一個手錶

3：您使用的是舊版本的IE？我認爲第8版在角度1.2和範圍上真的很慢。

所以，你可能會嘗試不使用默認手錶的數組，但自己處理它只看例如長度。對於{{}}一部分，因爲1.3可以前綴您通過結合「::」有一次結合（https://docs.angularjs.org/#!/guide/expression），所以他不會看更改

4：當您使用NG-如果銷燬對象時，沒有必要再重新建立時條件爲真又也許你應該用納克出現，而不是NG-如果有

<div ng-if="addString">