gpt4 book ai didi

angularjs - 多个指令 [myPopup、myDraggable] 请求新的/隔离的范围

转载 作者:行者123 更新时间:2023-12-03 05:59:18 29 4
gpt4 key购买 nike

我编写了一个对话框指令(myPopup)和另一个用于拖动此对话框的指令(myDraggable),但我总是收到错误:

Multiple directives [myPopup, myDraggable] asking for new/isolated scope

这是一个骗子:http://plnkr.co/edit/kMQ0hK5RnVw5xOBdDq5P?p=preview

我能做什么?

JS代码:

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);
}
}
};
}]);

最佳答案

来自docs :

Example scenarios of multiple incompatible directives applied to thesame 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.

尝试删除 myDraggable 指令上的隔离范围:

app.directive('myDraggable', ['$document',
function ($document) {
return {
restrict: 'A',
replace: false,
scope: { enabled: '=myDraggable' }, //remove this line

scope.enabled 替换为 attrs.enabled:

if (attrs.enabled == "true") {

并修改您的模板以绑定(bind)启用属性:

<div my-draggable="draggable" enabled="{{draggable}}"

DEMO

关于angularjs - 多个指令 [myPopup、myDraggable] 请求新的/隔离的范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22303368/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com