javascript - Angular Directive(指令)双向范围不更新模板

Question

我有一个 Angular Directive(指令) esResize，但在隔离作用域上使用双向绑定(bind)时遇到问题。

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”推送到它。但是，模板不会更新。我是否误解了绑定(bind)如何链接到 View ，或者这里有其他东西在起作用？

编辑: View 中的 pointGrid 只是一个数组。

Answer 1

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

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