Mixitup Angular.js指令（Angular.js监视不起作用）

Question

我需要将Angular.js与Mixitup集成，所以我创建了这样的指令

这是JSFiddle我的代码： http ： //jsfiddle.net/zn7t9p6L/19/

 var app = angular.module('app', []); app.directive('mixitup',function(){ var linker = function(scope,element,attrs) { scope.$watch('entities', function(){ console.log('reload'); element.mixItUp(); // how to tell mixitup to reload the data }); console.log('starting') }; return { restrict:'A', link: linker, scope:{entities:'='} } }) app.controller('DrawingsController', function DrawingsController($scope, $timeout) { $scope.categories = ['Soft', 'Elements']; $scope.drawings = [{ name: 'Water', category: 'Elements', value: '2' }, { name: 'Fire', category: 'Elements', value: '1' }, { name: 'Air', category: 'Elements', value: '4' }, { name: 'Coton', category: 'Soft', value: '3' }, { name: 'Whool', category: 'Soft', value: '5' }]; $scope.add = function(){ $scope.drawings.push({name:'new soft',value:$scope.drawings.length,category:'Soft'}) console.dir($scope.drawings); }; }); 

 <script src="http://cdn.jsdelivr.net/jquery.mixitup/2.0.4/jquery.mixitup.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script> <div ng-controller="DrawingsController"> <div class="controls"> <label>Filter:</label> <button class="filter" data-filter="all">All</button> <button class="filter" data-filter=".category-{{category}}" ng-repeat="category in categories">{{category}}</button> <label>Sort:</label> <button class="sort" data-sort="myorder:asc">Asc</button> <button class="sort" data-sort="myorder:desc">Desc</button> <label>Add:</label> <button data-ng-click="add()">Add</button> </div> <div mixitup='mixitup' class="container" entities='drawings'> <div class="mix category-{{drawing.category}}" data-myorder="{{drawing.value}}" ng-repeat="drawing in drawings">Value : {{drawing.name}}</div> </div> </div> 

我的问题是当我尝试向绘图数组添加新元素甚至更改数组时，它不会立即反映更改，您需要制作一些过滤器，如排序以反映更改。

此外，“实体”的观察者在开始时工作一次并且在图形阵列稍后发生任何更改时不再工作（它将打印重新加载一次并且不再打印它）您可以在jsfiddle中尝试它

Answer 1

您可以尝试将第三个参数传递给。$ watch（）为true。

http://docs.angularjs.org/api/ng。$ rootScope.Scope

$ watch（watchExpression，listener，objectEquality）

objectEquality（可选） - {boolean =} - 比较对象是否相等而不是参考。

Answer 2

经过一番挖掘，我找到了答案

正如@gayu所说，第一步是将第3个参数设置为true，这将解决观察者的第二个问题

要解决第一个立即更新mixitup的问题，您需要将此脚本添加到观察者回调中

element.mixItUp();
if(element.mixItUp('isLoaded')){
    element.mixItUp('destroy', true);
    element.mixItUp();
}

这个新的JSfiddle： http ： //jsfiddle.net/zn7t9p6L/20/