Question

（第一次使用Angular用户）

所以当尝试使用jqueryUI draggable和droppable删除另一个元素时，我尝试调用我创建的addField函数（当我用ng-click调用它时有效）的角度方法。

拖放工作正常，甚至可以正确更新我的模型，因为当我在$scope.fields函数内部运行addField时，它会找到我的对象。

问题在于，虽然对象存在，但它并没有像ng-repeat一样在ng-click html中显示它们。

角

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的更多信息。

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

1 个答案: