directive Mixitup angularjs (angularjs montre ne fonctionne pas)

Question

je dois intégrer angularjs avec Mixitup, donc je créé la directive comme celle

c'est jsFiddle à mon 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>

Mon problème est lorsque je tente d'ajouter un nouvel élément au tableau de dessins ou même modifier le tableau, il ne reflète pas les changements immédiatement, vous devez faire des filtres comme sorti ng pour refléter les changements.

L'observateur de "entités" fonctionne également une fois au début et ne fonctionne plus lorsque des modifications surviennent plus tard dans le tableau des dessins (il sera imprimé une fois rechargé et ne l'imprimera plus) Vous pouvez l'essayer dans jsfiddle

Answer 1

Vous pouvez essayer de passer un troisième argument à. $ watch() comme vrai.

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

montre $ (d'espion, auditeur, objectEquality)

objectEquality (en option) -. {= Booléen} - Comparer l'objet pour l'égalité plutôt que pour référence.

Answer 2

Je trouve la réponse après quelques recherches

Comme @gayu dit, la première étape consiste à définir le 3ème argument pour être vrai cela va résoudre le deuxième problème du veilleur

Pour résoudre le premier problème qui est mise à jour mixitup immédiatement, vous devrez ajouter ce script à la fonction de rappel de veilleur

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

ce nouveau jsFiddle: http://jsfiddle.net/zn7t9p6L/20/