使用AngualrJS和JQuery UI调整DIV大小

Question

我尝试做的就是使用AngularJS和Jquery-UI调整DIV的大小。 为此我试了Using jqueryUi.resizeable() with AngularJs这个链接但没有成功。

抛出 elem.resizable不是postLink的功能 。

这是我的指令链接功能：

在这个过程中我也试着跟随：

按以下顺序加载脚本

1. 加载JQuery
2. 加载JQuery-UI
3. 加载AngularJS

但我仍然得到错误相同的错误： elem.resizable不是一个函数。

link：function postLink（scope，elem，attrs）{

elem.resizable();
elem.on('resize', function(evt, ui) {
    scope.$apply(function() {
        if (scope.callback) {
            scope.callback({
                $evt: evt,
                $ui: ui
            });
        }
    })
});
}

任何人都可以帮忙解决这个问题。我在这里做错了什么，或者我尝试的方式不可能？

Answer 1

我添加了演示功能

<div ng-controller="myCtrl">
<div resizable on-resize="someFunction( $evt,$ui)">
    Hello, world !<br />
    I am resizable :)
</div>

- - - - 角------------------------------

var app = angular.module('myApp', []);app.controller('myCtrl', function ($http, $scope) {
$scope.someFunction = function (evt,ui) {
    console.log(evt);
    console.log(ui);
};});app.directive('resizable', function () {
return {
    restrict: 'A',
    scope: {
        callback: '&onResize'
    },
    link: function postLink(scope, elem, attrs) {
        elem.resizable();
       elem.on('resize', function(evt, ui) {
        scope.$apply(function() {
            if (scope.callback) {
                scope.callback({
                    $evt: evt,
                    $ui: ui
                });
            }
        })
    });
    }
};

}）;