Question

我正在构建一个AngularJS应用程序，并且想要了解我构建Angular代码的方式。

对于这个模块，我希望能够单击一个按钮，将Div添加到特定的“父div”，该div具有附加到其上的JQuery UI可拖动和可调整大小的交互。

他们可以添加多个可拖动且可调整大小的Div。

现在，我有一个生成整个Div的指令。停止调整大小时的事件回调被放置在附有指令的Button中。

指令代码要点：

var app = angular.module('myApp', []);

app.controller('IpadCtrl', function($scope) {
    $scope.someFunc = function () {
        console.log('resized');
        alert('resized');
    };

    $scope.test = 'sup';
});

app.directive('addImageCont', function () {
    return {
        restrict: 'A',

        link: function (scope, element, attributes) {
            console.log(attributes);
            element.on("click", function() {


                var div = $("<div />").css({
                    'width': '100px',
                    'height': '100px',
                    'background-color': 'purple'
                });

                div.draggable();
                div.resizable();

                div.on('resizestop', function(event, ui) {
                    console.log(ui);
                    var cBack = scope[attributes.callback];
                    cBack();
                });

                element.parent().find('.ipad').append(div);
            })
        }
    };
});

JSFiddle有一个例子： http://jsfiddle.net/GA2M8/3/

这是处理回调事件的正确方法吗？我希望能够在开始调整大小时进行回调。

我知道有更好的方法可以解决这个问题。

有人建议我打破我的指示。一个指令只是创建Div并将其附加到Dom。另一个将JQuery UI可拖动交互附加到它的指令。另一个将JQuery UI可调整大小的交互附加到它的指令。

如果这是我应该继续下去的话，我不知道如何链接指令。

指令中的JQuery UI事件回调

0 个答案: