角度指令雙向範圍不更新模板

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回調。

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