각도 지시문 템플릿을 업데이트하지 않는 양방향 범위

Question

각도 지시문 esResize이 있는데 격리 범위에서 양방향 바인딩을 사용하는 데 문제가 있습니다. resize가 트리거

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(); 
       } 
      }); 
     } 
    }; 
}); 

, 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 
}