避免$ compile:multidir

时间:2015-08-14 15:16:50

标签: javascript angularjs

这是我的问题。 我创建了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/

0 个答案:

没有答案