Question

我正在尝试在渲染子元素后在元素上设置css属性时遇到问题。实际上，我需要将父元素的高度设置为等于其第一个子元素的高度。问题是他的孩子在ng repeat指令中呈现，所以我不知道何时会计算元素高度。

首先，我尝试使用ng样式指令。它可以工作，但我只需要设置一次css，而不是每次范围都改变，因为我的公式是这样的：parentheight = firstChildHeight * scopeValue和scopeValue将在执行时间内改变。

非常感谢您的帮助！

Answer 1

对于第一部分，您可以设置一个监视第一个孩子的计算高度的手表。最好在这样的指令中完成：

app.controller（'MainCtrl'，function（$ scope）{ $ scope.myMultiplier = 2; }）;

app.directive('firstChildHeight', function(){
  return {
    link: function(scope, element, attrs){

     function firstChildHeight(){
         return element.find(':first-child').height();
     }

     //This will only get evaluated one time
     var multiplier = scope.$eval(attrs.heightMultiplier);

     scope.$watch(firstChildHeight, function(height){
        element.css('height', height*multiplier);   
     });
    }
  }
});

请注意我是如何仅从范围读取乘数的（我没有设置监视以使乘数变量保持最新）。这应该在最初设置后保持乘数变化（我理解的是你想要的）。

你可以像这样使用它：

app.controller('MainCtrl', function($scope) {
  $scope.myMultiplier = 2;
});

然后：

  <body ng-controller="MainCtrl">
    <div first-child-height height-multiplier="myMultiplier" style="background: red;">
      <div>You should see me in red</div>
      <div>I am in red too because height multiplier is 2</div>
      <div>I don't have red</div>
    </div>
  </body>

正如你所看到的，你真的不需要弄清楚ng-repeat什么时候完成渲染，父亲的高度总是与第一个孩子的身高相乘，再乘以第一个孩子的身高。编译指令时的乘数。

这是一个可以玩的傻瓜：

http://plnkr.co/edit/DqmcKgq00jdwjs5IZh7H?p=preview

我是否正确理解您的要求？

在angularjs中设置内联样式

1 个答案: