这是我的问题。
我创建了2个指令(<li class="{{currentPage.isCurrent:active}}">
和ngResizable
),并尝试将它们添加到我的元素中。
HTML:
ngMovable
js:
<div ng-app="app" ng-controller="BaseController as baseCtrl">
<div id="params">
<div>Width: <input type="number" ng-model="baseCtrl.model.sizes[0]"/></div>
<div>Height: <input type="number" ng-model="baseCtrl.model.sizes[1]"/></div>
<div>Pos X: <input type="number" ng-model="baseCtrl.model.position[0]"/></div>
<div>Pos Y: <input type="number" ng-model="baseCtrl.model.position[1]"/></div>
</div>
<div id="container">
<div id="element"
ng-style="{
left: baseCtrl.model.position[0],
top: baseCtrl.model.position[1],
width: baseCtrl.model.sizes[0],
height: baseCtrl.model.sizes[1]
}"
ng-resizable="baseCtrl.model.sizes"
ng-movable="baseCtrl.model.position">
</div>
</div>
</div>
我还将一些参数((function(angular){
"use strict";
angular.module("app", [])
.controller("BaseController", function(){
this.model = {
sizes: [200, 100],
position: [0, 0]
}
})
.directive("ngResizable", function(){
return {
restrict: "A",
scope: {
sizes: "=ngResizable"
},
link: function(scope, element) {
element.resizable({
handlers: "s,e",
resize: function(){
scope.sizes[0] = parseInt(element.width());
scope.sizes[1] = parseInt(element.height());
scope.$apply();
}
});
}
}
})
.directive("ngMovable", function(){
return {
restrict: "A",
scope: {
position: "=ngMovable"
},
link: function(scope, element) {
element.draggable({
drag: function(event) {
var pos = element.position();
scope.position[0] = pos.left;
scope.position[1] = pos.top;
scope.$apply();
}
});
}
}
})
})(angular)
和sizes
)从控制器绑定到元素,并输入和编写函数以从指令操作它们。
如果只使用一个指令但是当我同时使用它们$ compile时,它工作正常:发生了多重错误。
是否可以避免此错误?
这是jsfiddle演示:http://jsfiddle.net/gju8frsw
这里几乎是一个带有一个指令的演示:http://jsfiddle.net/gju8frsw/1/