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/