Question

我有一个角度指令esResize，我在隔离范围上使用双向绑定时遇到问题。

window.estimation.directive('esResize', function() {
    return {
        restrict:'C',
        scope: {
            pointGrid: '='
        },
        template: "<h2>{{ pointGrid }}</h2><ul><li ng-repeat='card in pointGrid track by $id(card)'>{{ card }}</li></ul>",
        controller: function($scope) {
            $scope.shiftTicket = function() {
                $scope.pointGrid.push("New Ticket");
            };
        },

        link: function(scope, element, attrs) {
            var height;    
            element.resizable({ 
                grid: [ 10, 20 ],
                handles: "n, s",
                start: function(event, ui) {
                    //initialize method
                },
                resize: function(event, ui) {
                    scope.shiftTicket();
                }
            });
        }
    };
});

当resize被触发时，pointGrid在我将其输出到控制台时将“New Ticket”推送到它。但是，模板不会更新。我是否误解了绑定如何链接到视图或者还有其他什么在这里发挥作用？

编辑：视图中的pointGrid只是一个数组。

Answer 1

在更新jquery插件回调中的范围值后，需要调用$scope.$apply();。这是因为它没有在角度自己的周期内触发，就像使用ng-click或$ http回调一样。

resize: function(event, ui) {
    scope.shiftTicket();
    scope.$apply(); // Should tell angular that this has updated
}

角度指令双向范围不更新模板

1 个答案: