角度指令 - 将绝对定位的死亡宽度设置为根宽度 [英] Angular directive - setting an absolutely positioned decedent's width to root's width
问题描述
我有一个自定义角度指令，它有一个后代div（不是一个孩子，但在层次结构的某个位置），它有绝对的定位。
设置绝对元素的宽度为指令的根宽度，我试图这样做在指令的链接函数。
由于各种设计原因，我无法将指令根的显示设为相对。
< body ng-controller =TestController>
< my-dir> < / my-dir>
< / body>
CSS
.my-dir {
width：400px;
height：100px;
background-color：red;
}
.my-dir-content {
position：absolute;
height：150px;
width：100px;
background-color：yellow;
}
脚本
var myApp = angular.module（'myApp'，[]）;
myApp.controller（'TestController'，['$ scope'，function（$ scope）{
$ scope.selectOption ='2';
}
myApp.directive（'myDir'，function（）{
return {
restrict：'E'，
link：function（scope，element）{
var myWidth = element.width（）;
var mySon = element.find（'。my-dir-content'）;
console.log（myWidth）;
mySon。 width（myWidth）;}，
template：'< div class =my-dir>'+
'< div class =my-dir-content> div>'+
'< / div>'
};
}）;
UPDATE：这是一个 JsBin
我做了一些挖掘，发现你的宽度为0，因为链接函数的元素参数不是你的模板 < div class =myDir> 。你需要做一个找到来获得那个元素。
使用它，它会工作。 （我使用width-10，所以我可以看得更好。）
修订指令：
angular.module（myApp）。directive（'myDir'，function（）{
return {
restrict：'E'，
link：function ，element）{
var myDir = element.find（'。my-dir'）;
var mySon = element.find（'。my-dir-content'）;
var myWidth = myDir.width（）;
console.log（myWidth）;
mySon.width（myWidth-10）;
}，
template：'< div class = my-dir>'+
'< div class =my-dir-content>< / div>'+
'< / div>'
} ;
}）;
您的旧JS：
var myApp = angular.module（'myApp'，[]）;
myApp.controller（'TestController'，['$ scope'，function（$ scope）{
$ scope.selectOption ='2';
}
myApp.directive（'myDir'，function（）{
return {
restrict：'E'，
link：function（scope，element）{
var myWidth = element.width（）;
var mySon = element.find（'。my-dir-content'）;
console.log（myWidth）;
mySon。 width（myWidth）;}，
template：'< div class =my-dir>'+
'< div class =my-dir-content> div>'+
'< / div>'
};
}）;
您的HTML：
<！DOCTYPE html>
< html ng-app =myApp>
< head>
< script src =https://code.jquery.com/jquery-2.1.4.js>< / script>
< script src =https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js>< / script>
< title> JS Bin< / title>
< / head>
< body ng-controller =TestController>
< my-dir> < / my-dir>
< / body>
< / html>
您的CSS：
.my-dir {
width：400px;
height：100px;
background-color：red;
}
.my-dir-content {
position：absolute;
height：150px;
width：100px;
background-color：yellow;
}
I have a custom angular directive with a descendant div (not a child, but somewhere down the hierarchy) that has an absolute positioning.
I'd like to set the absolute element's width to be that of the directive's root width, I attempt doing so in the directive's link function.
For various design reasons I cannot set the directive root's display to be relative.
How would you advise I achieve such a feat?
HTML
<body ng-controller="TestController">
<my-dir> </my-dir>
</body>
CSS
.my-dir{
width:400px;
height:100px;
background-color:red;
}
.my-dir-content{
position:absolute;
height:150px;
width:100px;
background-color:yellow;
}
Script
var myApp = angular.module('myApp',[]);
myApp.controller('TestController', ['$scope', function($scope) {
$scope.selectOption = '2';
}]);
myApp.directive('myDir', function() {
return {
restrict: 'E',
link : function (scope, element) {
var myWidth = element.width();
var mySon = element.find('.my-dir-content');
console.log(myWidth);
mySon.width(myWidth); },
template: '<div class="my-dir">' +
'<div class="my-dir-content"> </div>' +
'</div>'
};
});
UPDATE: Here's a JsBin
I did some digging and found that you were getting a width of "0" because the element parameter of the linking function is not your template <div class="myDir">. You need to do a find to get that element.
Using that, it will work. (I used width-10 so I could see it better.)
Revised directive:
angular.module("myApp").directive('myDir', function() {
return {
restrict: 'E',
link : function (scope, element) {
var myDir = element.find('.my-dir');
var mySon = element.find('.my-dir-content');
var myWidth = myDir.width();
console.log(myWidth);
mySon.width(myWidth-10);
},
template: '<div class="my-dir">' +
'<div class="my-dir-content"> </div>' +
'</div>'
};
});
Your old JS:
var myApp = angular.module('myApp',[]);
myApp.controller('TestController', ['$scope', function($scope) {
$scope.selectOption = '2';
}]);
myApp.directive('myDir', function() {
return {
restrict: 'E',
link : function (scope, element) {
var myWidth = element.width();
var mySon = element.find('.my-dir-content');
console.log(myWidth);
mySon.width(myWidth); },
template: '<div class="my-dir">' +
'<div class="my-dir-content"> </div>' +
'</div>'
};
});
Your HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<title>JS Bin</title>
</head>
<body ng-controller="TestController">
<my-dir> </my-dir>
</body>
</html>
Your CSS:
.my-dir{
width:400px;
height:100px;
background-color:red;
}
.my-dir-content{
position:absolute;
height:150px;
width:100px;
background-color:yellow;
}
这篇关于角度指令 - 将绝对定位的死亡宽度设置为根宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
