Установка встроенного стиля в angularjs

Я столкнулся с проблемой, пытаясь установить свойство css для элемента после того, как его дети были отображены. На самом деле мне нужно установить высоту родительского элемента равной высоте его первых дочерних элементов. Проблема в том, что его дочерние элементы отображаются в директиве ng Repeat, поэтому я не знаю, когда будет вычислена высота элемента.

Во-первых, я попытался использовать директиву стиля ng. Это работает, но мне нужно установить css только один раз, а не каждый раз, когда изменяется область действия, потому что моя формула похожа на: parentheight = firstChildHeight * scopeValue и scopeValue изменится во время выполнения.

Большое спасибо за любую помощь!


angularjs directive
person art.mu    schedule 13.12.2013    source источник
comment
Разместите свой код в jsfiddler, чтобы было легче увидеть, что вы сделали (и что с этим не так).   -  person adam    schedule 14.12.2013

Ответы (1)


arrow_upward
2
arrow_downward

Для первой части вы можете настроить часы, которые отслеживают расчетный рост первого ребенка. Лучше всего это сделать в такой директиве:

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, высота родителя всегда будет синхронизирована с высотой первого дочернего элемента, умноженной на значение множителя в точке время составления директивы.

Вот plunkr для игры:

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

Я правильно понял ваши требования?

person Daniel Tabuenca    schedule 13.12.2013
comment
Большое спасибо @dtabuenc, именно то, что я пытался сделать! - person art.mu; 14.12.2013