Angular Directive 双向范围不更新模板

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 在我将其输出到控制台时将“新票证”推送给它。但是，模板不会更新。我是否误解了绑定如何链接到视图，或者这里还有其他东西在起作用？

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

Answer 1

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

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