多重指令[myPopup，myDraggable]寻求新的/隔离的范围 [英] Multiple directives [myPopup, myDraggable] asking for new/isolated scope
问题描述
我写的对话框（myPopup），另一个用于拖动该对话框（myDraggable）指令，但我永诺得到的错误：
多重指令[myPopup，myDraggable]寻求新的/隔离的范围
下面是一个Plunker：<一href=\"http://plnkr.co/edit/kMQ0hK5RnVw5xOBdDq5P?p=$p$pview\">http://plnkr.co/edit/kMQ0hK5RnVw5xOBdDq5P?p=$p$pview
我该怎么办？
JS code：
VAR应用= angular.module（'对myApp'，[]）;功能myController的（$范围）{
$ scope.isDraggable =真;
}
app.directive（'myPopup'，[
功能（）{
使用严格的; 返回{
限制：'E'，
更换：真实，
transclude：真实，
模板：'＆LT; DIV我-拖动=拖动级=对话＆GT;＆LT; DIV CLASS =标题＆GT;的{{title}}＆LT; / DIV＆GT;＆LT; DIV CLASS =内容NG- transclude＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;，
范围： {
标题：@ DIALOGTITLE？，
可拖动的：'？@ isDraggable'，
宽度：'@宽度是多少？，
高度：'？@高度，
}，
控制器：函数（$范围）{
//有些code
}，
链接：功能（范围，元素，属性）{
如果（scope.width）{
element.css（'宽'，scope.width）;
} 如果（scope.height）{
element.css（'高度'，scope.height）;
}
}
};
}
]）;app.directive（'myDraggable'，['$文件'，
功能（$文件）{
返回{
限制：'A'，
更换：假的，
适用范围：{启用：'= myDraggable}， 链接：功能（范围，榆树，ATTRS）{
变种运行startx，startY，initialMouseX，initialMouseY; 如果（scope.enabled ===真）{
elm.bind（鼠标按下'，函数（$事件）{
运行startx = elm.prop（'offsetLeft'）;
startY = elm.prop（'的offsetTop'）;
initialMouseX = $ event.clientX;
initialMouseY = $ event.clientY;
$ document.bind（'鼠标移动'，鼠标移动）;
$ document.bind（鼠标松开，鼠标松开）;
。$事件preventDefault（）;
}）;
} 功能getMaxPos（）{
VAR computetStyle的getComputedStyle =（榆树[0]，NULL）;
VAR TX，TY;
VAR transformOrigin =
computetStyle.transformOrigin ||
computetStyle.webkitTransformOrigin ||
computetStyle.MozTransformOrigin ||
computetStyle.msTransformOrigin ||
computetStyle.OTransformOrigin;
TX = Math.ceil（parseFloat（transformOrigin））;
TY = Math.ceil（parseFloat（transformOrigin.split（）[1]））;
返回{
马克斯：{
X：TX + window.innerWidth - elm.prop（'offsetWidth'），
Y：TY + window.innerHeight - elm.prop（'的offsetHeight）
}，
分：{
X：TX，
Y：TY
}
};
} 鼠标移动功能（$事件）{
VAR X = STARTX + $ event.clientX - initialMouseX;
变种Y = startY + $ event.clientY - initialMouseY;
VAR上限= getMaxPos（）;
X =（X＆LT; limit.max.x）？ （（X＆GT; limit.min.x）×：limit.min.x）：limit.max.x;
Y =（Y＆LT; limit.max.y）？ （（Y＆GT; limit.min.y）Y：limit.min.y）：limit.max.y;
elm.css（{
顶部：Y +'像素'，
左：X +'像素'
}）;
。$事件preventDefault（）;
} 功能鼠标松开（）{
$ document.unbind（'鼠标移动'，鼠标移动）;
$ document.unbind（鼠标松开，鼠标松开）;
}
}
};
}]）;
解决方案从<一个href=\"http://docs.angularjs.org/error/%24compile/multidir?p0=myPopup&p1=myDraggable&p2=new/isolated%20scope&p3=%3Cdiv%20my-draggable=%22draggable%22%20class=%22dialog%22%20dialog-title=%22My%20Title%22%20is-draggable=%22%7B%7Btrue%7D%7D%22%3E\">docs:
多个不兼容的指令的实施例方案应用于
相同的元素包括：
多重指令，要求隔离范围即可。
多重指令发布下一个同名的控制器。
与transclusion选项声明多重指令。
多重指令试图定义模板或templateURL。
在尝试分离去除范围
myDraggable的指令：app.directive（'myDraggable'，['$文件'，
功能（$文件）{
返回{
限制：'A'，
更换：假的，
适用范围：{启用：'= myDraggable'} //删除此行替换
scope.enabled与attrs.enabled：如果（attrs.enabled ==真）{和修改模板，以使能属性绑定：
＆LT; DIV我-拖动=拖动启用={{拖拽}}I wrote a directive for dialogs (myPopup) and another one for dragging this dialog (myDraggable), but I allways get the error:
Multiple directives [myPopup, myDraggable] asking for new/isolated scope
Here is a Plunker: http://plnkr.co/edit/kMQ0hK5RnVw5xOBdDq5P?p=preview
What can I do?
JS code:
var app = angular.module('myApp', []); function myController($scope) { $scope.isDraggable = true; } app.directive('myPopup', [ function () { "use strict"; return { restrict: 'E', replace: true, transclude: true, template: '<div my-draggable="draggable"class="dialog"><div class="title">{{title}}</div><div class="content" ng-transclude></div></div>', scope: { title: '@?dialogTitle', draggable: '@?isDraggable', width: '@?width', height: '@?height', }, controller: function ($scope) { // Some code }, link: function (scope, element, attr) { if (scope.width) { element.css('width', scope.width); } if (scope.height) { element.css('height', scope.height); } } }; } ]); app.directive('myDraggable', ['$document', function ($document) { return { restrict: 'A', replace: false, scope: { enabled: '=myDraggable' }, link: function (scope, elm, attrs) { var startX, startY, initialMouseX, initialMouseY; if (scope.enabled === true) { elm.bind('mousedown', function ($event) { startX = elm.prop('offsetLeft'); startY = elm.prop('offsetTop'); initialMouseX = $event.clientX; initialMouseY = $event.clientY; $document.bind('mousemove', mousemove); $document.bind('mouseup', mouseup); $event.preventDefault(); }); } function getMaxPos() { var computetStyle = getComputedStyle(elm[0], null); var tx, ty; var transformOrigin = computetStyle.transformOrigin || computetStyle.webkitTransformOrigin || computetStyle.MozTransformOrigin || computetStyle.msTransformOrigin || computetStyle.OTransformOrigin; tx = Math.ceil(parseFloat(transformOrigin)); ty = Math.ceil(parseFloat(transformOrigin.split(" ")[1])); return { max: { x: tx + window.innerWidth - elm.prop('offsetWidth'), y: ty + window.innerHeight - elm.prop('offsetHeight') }, min: { x: tx, y: ty } }; } function mousemove($event) { var x = startX + $event.clientX - initialMouseX; var y = startY + $event.clientY - initialMouseY; var limit = getMaxPos(); x = (x < limit.max.x) ? ((x > limit.min.x) ? x : limit.min.x) : limit.max.x; y = (y < limit.max.y) ? ((y > limit.min.y) ? y : limit.min.y) : limit.max.y; elm.css({ top: y + 'px', left: x + 'px' }); $event.preventDefault(); } function mouseup() { $document.unbind('mousemove', mousemove); $document.unbind('mouseup', mouseup); } } }; }]);
解决方案From docs:
Example scenarios of multiple incompatible directives applied to the same element include:
Multiple directives requesting isolated scope.
Multiple directives publishing a controller under the same name.
Multiple directives declared with the transclusion option.
Multiple directives attempting to define a template or templateURL.
Try removing isolate scope on
myDraggable's directive:app.directive('myDraggable', ['$document', function ($document) { return { restrict: 'A', replace: false, scope: { enabled: '=myDraggable' }, //remove this lineReplace
scope.enabledwithattrs.enabled:if (attrs.enabled == "true") {And modify your template to bind the enable attribute:
<div my-draggable="draggable" enabled="{{draggable}}"这篇关于多重指令[myPopup，myDraggable]寻求新的/隔离的范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
