角指令 - 绝对定位的死者的宽度设置为根的宽度 [英] Angular directive - setting an absolutely positioned decedent's width to root's width
问题描述
我有一个后代格的自定义角度指令（而不是一个孩子，但某处的层次），有一个绝对定位。
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?
更新：这里有一个的jsfiddle - http://jsbin.com/ qofolahani /编辑？HTML，CSS，JS，控制台输出
UPDATE: Here's a jsfiddle - http://jsbin.com/qofolahani/edit?html,css,js,console,output
推荐答案
我做了一些挖掘和发现，你得到的0的宽度，因为元素参数在链接功能是不是你的模板＆LT; DIV CLASS =MYDIR＆GT; 。你需要做一个找到来获得该元素。
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.
使用的是，它的工作。 （我用宽度10，所以我可以更好地看到它。）
Using that, it will work. (I used width-10 so I could see it better.)
修订指令：
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>'
};
});
您老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;
}
这篇关于角指令 - 绝对定位的死者的宽度设置为根的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
