угловой нг-повтор не обновляется, когда угловой метод вызывается с JQuery внутри директивы

Question

(первый раз Угловая пользователя)

Так что я пытаюсь вызвать угловой метод, который я создал addField функцию (которая работает, если я называю это с ng-click), когда другой элемент удаляется с помощью jqueryUI draggable и droppable.

Функция перетаскивания работает нормально, и это даже верно обновляет мою модель, потому что, когда я запускаю $scope.fields в консоли при разрыве внутри функции addField, она находит мои объекты в порядке.

Проблема в том, что хотя объекты есть, они не отображаются в файле ng-repeat html, как это было с ng-click.

ANGULAR

angular.module('formApp', []) 
    .controller('formController', ['$scope', function($scope) { 
     $scope.fields = [ 
      //{label:'The Field Title, with Angular', desc:'Lorem Ipsum Dolor', req:false}, 
      //{label:'The Other Field Title, with Angular', desc:'Lorem Ipsum Dolor Dos', req:false} 
      ]; 
     $scope.addField = function() { 
      $scope.fields.push({label:'Added Form Title', desc:'Added Form Desc', req:true}); 
      //$scope.fieldLabel = ''; 
      console.log("addField"); 
     }; 
    }]) 
    .directive('drag', function() { 
    return { 
     restrict: "A", 
     link: function(scope, elem, attrs) { 
      $(elem).draggable({ 
       helper: "clone", 
       activeClass: "ui-state-default", 
       hoverClass: "ui-state-hover", 
       drop: function(event, ui) { 
       } 
      }); 
     } 
    } 
    }) 
    .directive('drop', function() { 
    return { 
     restrict: "A", 
     link: function(scope, elem, attrs) { 
      $(elem).droppable({ 
       hoverClass: "holder-state-highlight", 
       drop: function(event, ui) { 
        //handleDropEvent(event, ui); 
        //sortOrder(); 
        angular.element('#theForm').scope().addField(); 
       } 
      }); 
     } 
    } 
}); 

Answer 1

Это происходит потому, что падение обратного вызова JQuery происходит вне рамок угловыми, так Угловая не имеет знания о нем происходит. В этом случае, вы должны уведомить Угловой обернув его в $apply следующим образом:

.directive('drop', ['$scope', function($scope) { 
return { 
    restrict: "A", 
    link: function(scope, elem, attrs) { 
     $(elem).droppable({ 
      hoverClass: "holder-state-highlight", 
      drop: function(event, ui) { 
        //handleDropEvent(event, ui); 
        //sortOrder(); 
        $scope.$apply(angular.element('#theForm').scope().addField()); 
       } 
      }); 
     } 
    } 
}]); 

Вы можете прочитать больше о $apply функции угловой в here.