Mixitup Angular.js 指令（Angular.js 手表不起作用）答案

【问题标题】：Mixitup Angular.js directive (Angular.js watch doesn't work)Mixitup Angular.js 指令（Angular.js 手表不起作用）
【发布时间】：2015-12-07 12:51:39
【问题描述】：

我需要将 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试试看

【问题讨论】：

标签： javascript angularjs mixitup

【解决方案1】：

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

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

$watch(watchExpression, listener, objectEquality)

objectEquality(optional) – {boolean=} – 比较对象是否相等而不是引用。

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：