Question

我需要将Angular.js与Mixitup集成，所以我创建了类似

的指令

这是我的代码的JSFiddle：http://jsfiddle.net/zn7t9p6L/19/

＆＃13;

with open('flights.txt', 'r') as f:
    for line in f:
        y = line.split()
        print(y)

＆＃13;

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);
    };
});

＆＃13;

我的问题是，当我尝试将新元素添加到图纸数组甚至更改数组时，它不会立即反映更改，您需要制作一些过滤器，如排序以反映更改。

也是＆＃34;实体的观察者＆＃34;一旦开始工作，并且在图纸阵列稍后发生任何变化时不再工作（它将打印重新加载一次并且不再打印它）你可以在jsfiddle

中试一试

Answer 1

您可以尝试将第3个参数传递给。$ watch（）为true。

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

$ watch（watchExpression，listener，objectEquality）

objectEquality（可选） - {boolean =} - 比较对象是否相等而不是参考。

Answer 2

我在挖掘后找到了答案

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

要修复第一个立即更新mixitup的问题，您需要将此脚本添加到观察者回调

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

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

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

2 个答案: