Javascript 在嵌套指令中，为什么我的子指令获取父指令的属性？
我正在使用AngularJS+D3创建一个交互式绘图工具。我对两者都是新手。我有一个framecontainer指令，它包含框架。每个帧都是一个svg组，包含一个矩形和拖动手柄。Framecontainer处理所有交互，包括添加新帧。每个帧可以包含更多帧。在Framecontainer指令的link函数中，我编译了一个新的框架并附加它以添加新的框架。现在，当我第一次使用$compile添加框架时，它会按预期添加框架。但是，当我拖动新添加的框架时，它似乎从父DOM元素获得了其属性，如宽度和高度。拖动函数获取父DOM元素的值。为什么会这样 这是拖动功能：Javascript 在嵌套指令中，为什么我的子指令获取父指令的属性？,javascript,jquery,angularjs,d3.js,Javascript,Jquery,Angularjs,D3.js,我正在使用AngularJS+D3创建一个交互式绘图工具。我对两者都是新手。我有一个framecontainer指令，它包含框架。每个帧都是一个svg组，包含一个矩形和拖动手柄。Framecontainer处理所有交互，包括添加新帧。每个帧可以包含更多帧。在Framecontainer指令的link函数中，我编译了一个新的框架并附加它以添加新的框架。现在，当我第一次使用$compile添加框架时，它会按预期添加框架。但是，当我拖动新添加的框架时，它似乎从父DOM元素获得了其属性，如宽度和高度。拖
var dragmove=function(d) {
if (scope.moveable==="true") {
console.log("COMES HERE TOO!");
d.x = Math.max(0, Math.min(w - width, d3.event.x));
d.y = Math.max(0, Math.min(h - height, d3.event.y));
d3.select(dragrect[0].parentNode).attr("transform","translate("+ d.x+","+ d.y+")");
translatex= d.x;
translatey= d.y;
}
}
app.directive('frames',function($compile){
return{
restrict:'E',
priority:20,
scope:{
},
replace:true,
require:'^^framecontainer',
template:"<g><rect id='{{surfaceID}}' class='drawarea' ng-Dblclick='popDialog()' fill-opacity='1' ng-attr-x='{{x}}' ng-attr-y='{{y}}' ng-attr-height='{{rectheight}}' ng-attr-width='{{rectwidth}}' stroke-width='3' cursor='move' stroke='{{strokecolor}}' ng-attr-fill={{rectfill}} ></rect>"
+ "<rect ng-attr-height='{{handlerheightr}}' class='dragr' opacity='0' ng-attr-x='{{handlerxr}}' ng-attr-y='{{handleryr}}' ng-attr-width='{{handlerwidthr}}' cursor='ew-resize' fill='#773326' ></rect>"
+ "<rect ng-attr-height='{{handlerheightl}}' class='dragl' opacity='0' ng-attr-x='{{handlerxl}}' ng-attr-y='{{handleryl}}' ng-attr-width='{{handlerwidthl}}' cursor='ew-resize' fill='#773326'></rect>"
+ "<rect ng-attr-height='{{handlerheightt}}' class='dragt' opacity='0' ng-attr-x='{{handlerxt}}' ng-attr-y='{{handleryt}}' ng-attr-width='{{handlerwidtht}}' cursor='ns-resize' fill='#773326'></rect>"
+ "<rect ng-attr-height='{{handlerheightb}}' class='dragb' opacity='0' ng-attr-x='{{handlerxb}}' ng-attr-y='{{handleryb}}' ng-attr-width='{{handlerwidthb}}' cursor='ns-resize' fill='#773326'></rect>"
+"</g>",
compile:function(s,e) {
return {
post: function postLink(scope, element, attr, controller) {
var dragbarw = 10;
scope.surfaceID=attr.id;
scope.rectheight = attr.height;
scope.rectwidth = attr.width;
scope.strokecolor = attr.stroke;
scope.rectfill = attr.fill;
scope.x = attr.x;
scope.y = attr.y;
scope.handlerheightr = attr.height;
scope.handlerwidthr=dragbarw;
scope.handlerheightl = scope.rectheight;
scope.handlerwidthl=dragbarw;
scope.handlerheightt=dragbarw;
scope.handlerheightb=dragbarw;
scope.handlerwidtht=scope.rectwidth;
scope.handlerwidthb=scope.rectwidth;
scope.moveable=attr.mv;
var w = 800;
var h = 500;
var width = scope.rectwidth;
var height=scope.rectheight;
var translatex,translatey;
var dragrect = d3.select(element[0]).selectAll('.drawarea').attr("width","300");
var entireContents=d3.select(element[0]).select('*');
d3.select(element[0]).data([{x:0, y: 0}]);
var dragbarleft=d3.select(element[0]).select(".dragl");
var dragbartop=d3.select(element[0]).select(".dragt");
var dragbarright=d3.select(element[0]).select(".dragr");
var dragbarbottom=d3.select(element[0]).select(".dragb");
// Selector and deselector
var select = function () {
controller.addToSelection('#'+d3.select(this).attr("id"));
//controller.addToSelection(this);
d3.select(this).attr('stroke-dasharray', '5 5')
.on('click', deselect);
};
var deselect = function () {
controller.popFromSelection('#'+d3.select(this).attr("id"));
d3.select(this).attr('stroke-dasharray', '')
.on('click', select);
};
d3.select(element[0]).select('.drawarea').on('click', select);
function rdragresize(d) {
var dragx = Math.max(d.x + (dragbarw / 2), Math.min(w, d.x + width + d3.event.dx));
width = dragx - d.x;
dragbarright.attr("x", function (d) {
return dragx;
});
dragrect.attr("width", width);
dragbarright.attr("x", dragx);
dragbartop
.attr("width", width - dragbarw)
dragbarbottom
.attr("width", width - dragbarw)
}
function ldragresize(d) {
var oldx = d.x;
//Max x on the right is x + width - dragbarw
//Max x on the left is 0 - (dragbarw/2)
d.x = Math.max(0, Math.min(d.x + width - (dragbarw / 2), d3.event.x));
width = width + (oldx - d.x);
dragbarleft
.attr("x", function(d) { return d.x - (dragbarw / 2)-translatex; });
dragrect
.attr("x", function(d) { return d.x-translatex; })
.attr("width", width);
dragbartop
.attr("x", function(d) { return d.x + (dragbarw/2)-translatex; })
.attr("width", width - dragbarw)
dragbarbottom
.attr("x", function(d) { return d.x + (dragbarw/2)-translatex; })
.attr("width", width - dragbarw)
}
function tdragresize(d){
var oldy = d.y;
d.y = Math.max(0, Math.min(d.y + height - (dragbarw / 2), d3.event.y));
height = height + (oldy - d.y);
dragbartop
.attr("y", function(d) { return d.y - (dragbarw / 2)-translatey; });
dragrect
.attr("y", function(d) { return d.y-translatey; })
.attr("height", height);
dragbarleft
.attr("y", function(d) { return d.y + (dragbarw/2)-translatey; })
.attr("height", height - dragbarw);
dragbarright
.attr("y", function(d) { return d.y + (dragbarw/2)-translatey; })
.attr("height", height - dragbarw);
}
var bdragresize=function(d){
var dragy = Math.max(d.y + (dragbarw/2), Math.min(h, d.y + height + d3.event.dy));
//recalculate width
height = dragy - d.y;
//move the right drag handle
dragbarbottom
.attr("y", function(d) { return dragy - (dragbarw/2) });
//resize the drag rectangle
//as we are only resizing from the right, the x coordinate does not need to change
dragrect
.attr("height", height);
dragbarleft
.attr("height", height - dragbarw);
dragbarright
.attr("height", height - dragbarw);
}
var dragmove=function(d) {
if (scope.moveable==="true") {
console.log("COMES HERE TOO!");
d.x = Math.max(0, Math.min(w - width, d3.event.x));
d.y = Math.max(0, Math.min(h - height, d3.event.y));
d3.select(dragrect[0].parentNode).attr("transform","translate("+ d.x+","+ d.y+")");
translatex= d.x;
translatey= d.y;
}
}
scope.popDialog=function()
{
var newText=angular.element('<editabletext x="'+(scope.x+scope.rectwidth/2-scope.rectwidth/10)+'" y="'+scope.y+scope.rectheight/5+'" height="'+scope.rectheight/5+'" width="'+scope.rectwidth/5+'" text="Hello!!"></editabletext>');
element.append(newText);
$compile(newText)(scope);
}
function stopPropagation()
{
d3.event.sourceEvent.stopPropagation();
}
var dragr = d3.behavior.drag().origin(Object).on("drag", rdragresize).on("dragstart",stopPropagation);
var dragl=d3.behavior.drag().origin(Object).on("drag",ldragresize).on("dragstart",stopPropagation);
var dragt=d3.behavior.drag().origin(Object).on("drag",tdragresize).on("dragstart",stopPropagation);
var dragb=d3.behavior.drag().origin(Object).on("drag",bdragresize).on("dragstart",stopPropagation);
var drag=d3.behavior.drag().origin(Object).on("drag",dragmove);
console.log("ATTR-MV outside the drag function: "+attr.mv);
d3.select(dragrect[0].parentNode).call(drag);
dragbarleft.call(dragl);
dragbarright.call(dragr);
dragbartop.call(dragt);
dragbarbottom.call(dragb);
}
}
},
controller:function($scope,$element)
{
this.getHeight=function()
{
return $scope.height;
}
this.getWidth=function()
{
return $scope.rectwidth;
}
this.getPosition=function()
{
return {x:scope.x,y:scop.y};
}
//$scope.$watch('fillFromParent',function(){ if ($scope.fillFromParent)$scope.rectfill=$scope.fillFromParent;});
}
};});
app.directive（'frames'，function（$compile）{
返回{
限制：'E'，
优先事项：20，
范围：{
},
替换：正确，
要求：“^framecontainer”，
模板：“”
+ ""
+ ""
+ ""
+ ""
+"",
编译：函数（s，e）{
返回{
post：函数postLink（范围、元素、属性、控制器）{
var dragbarw=10；
scope.surfaceID=attr.id；
scope.rectheight=attr.height；
scope.rectwidth=attr.width；
scope.strokecolor=attr.stroke；
scope.rectfill=attr.fill；
scope.x=attr.x；
scope.y=属性y；
scope.handlerheightr=属性高度；
范围：handlerwidthr=dragbarw；
scope.handlerheightl=scope.rectheight；
范围：handlerwidthl=dragbarw；
范围：handlerheightt=dragbarw；
范围：handlerheightb=dragbarw；
scope.handlerwidtht=scope.rectwidth；
scope.handlerwidthb=scope.rectwidth；
可移动范围=attr.mv；
var w=800；
var h=500；
变量宽度=scope.rectwidth；
var height=scope.rectheight；
var translatex，translatey；
var dragrect=d3.select（元素[0]）.selectAll（'.drawarea'）.attr（“宽度”，“300”）；
var entireContents=d3.select（元素[0]）.select（'*'）；
d3.选择（元素[0]）。数据（[{x:0，y:0}]）；
var dragbarleft=d3.select（元素[0]）。select（“.dragl”）；
var dragbartop=d3.select（元素[0]）。select（“.dragt”）；
var dragbarright=d3.select（元素[0]）.select（“.dragr”）；
var dragbarbottom=d3.select（元素[0]）。select（“.dragb”）；
//选择器和取消选择器
变量选择=函数（）{
controller.addToSelection（“#”+d3.select（this.attr（“id”））；
//控制器。添加到选择（本）；
d3.选择（this）.attr（'stroke-dasharray'，'5'）
.打开（'单击'，取消选择）；
};
变量取消选择=函数（）{
controller.popFromSelection（“#”+d3.select（this.attr（“id”））；
d3.选择（this）.attr（'stroke-dasharray'，''）
.打开（'单击'，选择）；
};
d3.选择（元素[0]）。选择（'.drawarea'）。在（'click'，select'）上；
函数rdragresize（d）{
var dragx=Math.max（d.x+（dragbarw/2），Math.min（w，d.x+宽度+d3.event.dx））；
宽度=dragx-d.x；
属性（“x”，函数（d）{
返回dragx；
});
牵引属性（“宽度”，宽度）；
属性（“x”，dragx）；
德拉巴托普
.attr（“宽度”，宽度-dragbarw）
德拉博通
.attr（“宽度”，宽度-dragbarw）
}
函数ldragresize（d）{
var oldx=d.x；
//右侧的最大x为x+宽度-德拉巴沃
//左侧的最大x为0-（德拉巴沃/2）
d、 x=Math.max（0，Math.min（d.x+width-（dragbarw/2），d3.event.x））；
宽度=宽度+（oldx-d.x）；
德拉巴利夫特
.attr（“x”，函数（d）{返回d.x-（dragbarw/2）-translatex；}）；
拖拽
.attr（“x”，函数（d）{返回d.x-translatex；}）
.attr（“宽度”，宽度）；
德拉巴托普
.attr（“x”，函数（d）{返回d.x+（dragbarw/2）-translatex；}）
.attr（“宽度”，宽度-dragbarw）
德拉博通
.attr（“x”，函数（d）{返回d.x+（dragbarw/2）-translatex；}）
.attr（“宽度”，宽度-dragbarw）
}
函数tdragresize（d）{
var oldy=d.y；
d、 y=数学最大值（0，数学最小值（d.y+高度-（dragbarw/2），d3.event.y））；
高度=高度+（旧的-d.y）；
德拉巴托普
.attr（“y”，函数（d）{返回d.y-（dragbarw/2）-translatey；}）；
拖拽
.attr（“y”，函数（d）{返回d.y-translatey；}）
.attr（“高度”，高度）；
德拉巴利夫特
.attr（“y”，f）
app.directive('framecontainer',function($compile){
return{
restrict:'A',
scope:{
split:'=',
mergeq:'=',
fillparam:'@',
perform:'='
},
priority:1,
replace:true,
transclude:false,
template:'<svg><frames id ="maing" stroke="#bada55" x="0" y="0" resize height="500" width="765" fill="#006600" mv="false" dialog="poptextdialog()"> </frames></svg>',
link:function(scope,element,attr)
{
scope.$watch('perform',function(){
var newFrame;
var curWidth;
var curHeight;
var curX,curY;
var newFrame;
var frameID=0;
function getRectCor(x,y,width,height)
{
return {x:(parseFloat(x)-parseFloat(width)/2),y:(parseFloat(y)-parseFloat(height)/2)};
}
if (scope.perform) {
switch (scope.perform.action) {
case 0:
angular.forEach(scope.selectionStack,function(value,i){
curWidth=100;
curHeight=100;
curX=10;
curY=10;
newFrame=angular.element('<frames data-mv="true" data-stroke="#bada55" data-x="'+curX+'" data-y="'+curY+'" data-height="'+curHeight+'" data-width="'+curWidth+'" data-fill="#FFFFFF" id="elem'+frameID+'" ></frames>');
frameID=frameID+1;
console.log("value is "+value);
$(value).append(newFrame);
$compile(newFrame)(scope.$new(true));
});
break;
}
}
});
var firstFrame='<g frame id ="maing" stroke="#bada55" x="0" y="0" resize height="500" width="765" fill="#006600" mv="true" dialog="poptextdialog()"> </g>';
element.append(firstFrame);
$compile(firstFrame)(scope);
},
controller:function($scope,$element)
{
$scope.selectionStack=[];
var indexSelectionStack;
this.addToSelection=function(s){
$scope.selectionStack.push(s);
console.log($scope.selectionStack);
};
this.popFromSelection=function(s){
var index=$scope.selectionStack.indexOf(s)
if (index>-1){
$scope.selectionStack.splice(index,1);
}
};
$scope.$watch('fillparam',function(){
angular.forEach($scope.selectionStack,function(value,index){
d3.select(value).select("rect").attr("fill",$scope.fillparam);
});
});
}
};});
var drag=d3.behavior.drag().origin(Object).on("drag",dragmove).on("dragstart",stopPropagation);