Hauteur d'élément dans une AngularJS directive

J'essaye de prendre de la hauteur des éléments en une simple application AngularJS.
Voir ci-dessous. Ce que je fais mal? La hauteur doit être différent que l'habillage lignes, mais je reçois 20 rapporté à moi, peu importe ce que je entrée dans les "étiquettes" array.

Le code suivant peut être exécutée ici, sinon voir ci-dessous.
http://js.do/code/49177

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <base href="/">

  <title>height of element in angularjs</title>

  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-route.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  <script type="text/javascript">
    'use strict';

    var app = angular.module('heightApp', ['ngRoute', 'routing']);

    app.controller('heightCtrl', ['$scope', function ($scope) {
      $scope.labels = [
        'Hi there, I\'m a div.',
        'Me too, I\'m also a div.',
        'Can you see me, because I certainly can\'t see myself. I don\'t even know my own height. Isn\'t that just crazy?'
      ];

    }]);    

    angular.module('routing', []).config(['$routeProvider', function($routeProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'height.html',
          controller: 'heightCtrl'
        });
    }]);

    angular.module('heightApp').directive('reportMyHeight', function() {
      return function (scope, el, attrs) {
          alert('offsetHeight = ' + el[0].offsetHeight);
        }
    })
  </script>

</head>

<body ng-app="heightApp">

<div class="container">
  <div ng-view></div>
</div>

</body>

<script type="text/ng-template" id="height.html">
  <div class="row">
    <div class="col-sm-4" report-my-height ng-repeat="lbl in labels">
      {{ ::lbl }}
    </div>
  </div>
</script>

</html>

OriginalL'auteur Charles Sounder | 2015-01-12

  1. 8

    Vous devez attendre jusqu'à la prochaine digérer cycle. Lorsque vous le faites tout de suite dans la directive sur les interpolations {{ ::lbl }} à l'intérieur de la ng-repeat n'aurait pas élargi encore. Vous pouvez le placer dans un $timeout désactivation de la applyDigest argument.

    je.e, par exemple:

    angular.module('heightApp').directive('reportMyHeight', function($timeout) {
   return function (scope, el, attrs) {

      $timeout(init, false);

      //Initialization
      function init(){
        console.log('offsetHeight = ' + el[0].offsetHeight,  el.html());
      }

    }
});

    Plnkr

    $timeout a été embrayage! Je ne pouvais pas comprendre pourquoi la hauteur était tellement différent de ce que j'étais en train de regarder.

    OriginalL'auteur PSL

  2. 1

    Une autre façon de vous assurer d'obtenir la hauteur de l'élément est d'utiliser la montre.

    angular.module('heightApp').directive('reportMyHeight', function($timeout) {
  return function (scope, el, attrs) {
    scope.$watch('lbl', function(newval, oldval){
      alert(newval + '\n\n' + 'offsetHeight = ' + el[0].offsetHeight);
    });
  }
})

    Il ne sera déclenchée une fois depuis que vous utilisez ::.

    OriginalL'auteur Sergey Romanov