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

【问题标题】：Angular directive - setting an absolutely positioned decedent's width to root's widthAngular 指令 - 将绝对定位的死者的宽度设置为根的宽度
【发布时间】：2016-02-22 16:26:43
【问题描述】：

我有一个自定义 angular 指令，其后代 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

【问题讨论】：

标签： javascript jquery html css angularjs

【解决方案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;
}

【讨论】：

【解决方案2】：

这样的？抱歉，我并没有真正明白你想要做什么。

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

【讨论】：