Angular 指令双向作用域未更新模板

Question

我有一个 Angular 指令 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只是一个数组。

- Max Woolf

Answer 1

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

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

- Dan Saltmer

---

一针见血。谢谢。两分钟后我可以接受。 - Max Woolf

不确定那样做是否会起作用。你应该将pointGrid: '='改为pointGrid: '&'。我刚刚遇到了同样的问题，通过这种方式解决了。尝试调用scope.$apply了吗？ - WebWanderer