javascript - 当使用 jquery inside 指令调用 Angular 方法时，Angular ng-repeat 不更新

Question

(第一次使用 Angular 用户)

所以我试图调用我创建的 Angular 方法 addField当使用 jqueryUIdraggable 和 droppable 删除另一个元素时，函数(如果我使用 ng-click 调用它，则该函数有效)。

拖放工作正常，甚至可以正确更新我的模型，因为当我运行 $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 drop 回调发生在 Angular 框架之外，因此 Angular 不知道它的发生。在这种情况下，您需要通过将其包装在 $apply 中来通知 Angular，如下所示:

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

您可以阅读有关 Angular 的 $apply 函数的更多信息 here .