Mixitup Angular.js指令(Angular.js手表不工作)

Question

我需要将Angular.js与混合式集成起来，所以我创建了这样的指令

这是我的代码的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>

​

我的问题是，当我试图向绘图数组中添加新元素，甚至更改数组时，它不会立即反映更改，您需要进行一些筛选，比如排序以反映更改。

另外，“实体”的观察者在开始时只工作一次，当稍后对绘图数组发生任何更改(它将打印重载一次，不再打印它)时，就不再工作了，您可以在小提琴中尝试它。

Answer 1

您可以尝试将第三个参数作为true传递给.$watch()。

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

$watch(watchExpression，侦听器，objectEquality)

objectEquality(可选)- {boolean=} -比较对象是否相等，而不是引用。

Answer 2

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

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

要修复第一个问题，即立即更新mixitup，您需要将此脚本添加到监视程序回调中。

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

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