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

Question

I need to integrate Angular.js with Mixitup , so I created directive like that

this is JSFiddle to my code: 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> 

My problem is when I try to add new element to the drawings array or even change the array, it doesn't reflect the changes immediately, you need to make some filters like sorting to reflect changes.

Also the watcher to "entities" work once at the beginning and doesn't work anymore when any changes happen later to the drawings array (it will print reload one time and will not print it anymore) you can try it in jsfiddle

Answer 1

You can try to pass a 3rd argument to .$watch() as true.

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

$watch(watchExpression, listener, objectEquality)

objectEquality(optional) – {boolean=} – Comparing the object for equality rather than for reference.

Answer 2

I found the answer after some digging

As @gayu said , the first step is to set the 3rd argument to be true this will fix the second problem of the watcher

To fix the first problem which is updating mixitup immediately , you will need to add this script to the watcher callback

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

this the new JSfiddle : http://jsfiddle.net/zn7t9p6L/20/