Angular指令-将绝对定位的死者的宽度设置为根的宽度

Question

我有一个带有绝对位置的后代div（不是子代，而是层次结构下的某个地方）的自定义角度指令。

我想将绝对元素的宽度设置为指令的根宽度，我尝试在指令的链接函数中这样做。

由于各种设计原因，我无法将指令根目录的显示设置为相对。

您如何建议我实现这一壮举？

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

脚本

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

更新：这是一个JsBin

Answer 1

我进行了一些挖掘，发现您得到的宽度为“ 0”，因为链接函数的element参数不是您的模板<div class="myDir"> 。 您需要进行find以获取该元素。

使用它，它将起作用。 （我使用width-10，以便可以更好地看到它。）

修订指令：

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

Answer 2

像这样吗 抱歉，我没有真正了解您想要做什么。

（ http://jsbin.com/miquweyufa/1/edit?html,css,js,console,output ）