Question

我有3个div，其中数据从控制器填充。并且div取决于下拉选择（特定的div将显示特定的下拉值）。问题是当页面加载时我无法获得该div的高度，而且当我更改了下拉值时。每次我都达到0高度。

这是html的代码：

 <div class="brand-categoryWrp">
          <select ng-model="allbrandscategory" ng-change="catChange(allbrandscategory)">
              <option value="all">AllBrands</option>
              <option value="watches">Watches</option>
              <option value="pens">Pens</option>
          </select>
      </div>

   <div ng-show="firstdiv" allbrands-directive>
      <ul>
        <li ng-repeat="res in brands">
          {{res.name}}
        </li>
      </ul> 
    </div>
    <div ng-show="seconddiv" watches-directive>
      <ul>
       <li ng-repeat="res in brands1">
          {{res.name}}
        </li>
      </ul> 
    </div>
    <div ng-show="thirddiv" pens-directive>
      <ul>
        <li ng-repeat="res in brands2">
          {{res.name}}
        </li>
      </ul> 
    </div>

这里是控制器：

// Code goes here

var myapp = angular.module('myModule', []);

myapp.controller('mycntrl',function($scope){


 $scope.allbrandscategory = 'all';
 $scope.firstdiv = true;

 $scope.brands = [
   {name: 'Adidas'},
   {name: 'Armani'}
 ];

  $scope.brands1 = [
    {name: 'Adidas1'},
    {name: 'Armani1'},
    {name: 'Fossil'}
];

  $scope.brands2 = [
    {name: 'Adidas2'},
    {name: 'Armani2'},
    {name: 'Mont blanc'},
    {name: 'calvin'}

];

  $scope.catChange = function(val){

   $scope.firstdiv = false;
   $scope.seconddiv = false;
   $scope.thirddiv = false;
   if(val == 'all')
   {
     $scope.firstdiv = true;
   }
   else if(val == 'watches')
   {
     $scope.seconddiv = true;
   }
   else if(val == 'pens')
   {
       $scope.thirddiv = true;
   }
 };

});

myapp.directive('pensDirective', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element) {
        //console.log(element);
        console.log("pens: "+element[0].offsetHeight);
       }
   };
 });
  myapp.directive('watchesDirective', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element) {
       // console.log(element);
        console.log('watches: '+element[0].offsetHeight);
       }
    };
  });
  myapp.directive('allbrandsDirective', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element) {
        //console.log(element);
        console.log("brand: "+element[0].offsetHeight);
       }
   };
  });

Here is the plunker

Answer 1

在将模型数据绑定到视图之前执行link函数（当您请求offsetHeight时，div不包含任何子元素。尝试将其包装到{ {1}}，将在当前摘要周期结束时执行。

Answer 2

查看AngularJs event to call after content is loaded

这对你的问题有一个很好的答案，似乎有效。第二个回答。

我在你的allbranddirective上添加了以下内容，对你进行了测试：

        element.ready(function(){
          console.log("brand: "+element[0].offsetHeight);
        });

修改

HTML：

<html>

<div class="brand-categoryWrp"> <select ng-model="divtoshow" ng-change="catChange(divtoshow)"> <option value="allbrands-directive">AllBrands</option> <option value="watches-directive">Watches</option> <option value="pens-directive">Pens</option> </select> </div> <div allbrands-directive><ul><li ng-repeat='res in brands'>{{res.name}}</li></ul></div>

JS：

var myapp = angular.module('myModule', []); myapp.controller('mycntrl',function($scope){ $scope.brands = [{name: 'Adidas'}, {name: 'Armani'}]; $scope.divtoshow = 'allbrands-directive' $scope.catChange = function(val){ $scope.divtoshow = val; if (val == 'allbrands-directive'){ $scope.brands = [{name: 'Adidas'}, {name: 'Armani'}]; }else if (val == 'watches-directive') { $scope.brands = [{name: 'Adidas1'},{name: 'Armani1'},{name: 'Fossil'}]; }else if (val == 'pens-directive') { $scope.brands = [{name: 'Adidas2'},{name: 'Armani2'},{name: 'Mont blanc'},{name: 'calvin'}]; } } }); myapp.directive('allbrandsDirective', function($timeout) { return { restrict: 'A', link: function(scope, element) { scope.$watch('brands', function(){ console.log("brand: "+element[0].offsetHeight); }); } }; });

所以我稍微更改了你的代码，我只设置了一个指令，在这里我观察品牌变量的变化，当这个变化时我们得到元素的高度。

请参阅plunker - http://plnkr.co/edit/vZhn2aMRI6wKn3yVharS?p=preview

如果您需要单独指令中的每个部分，请参阅空值答案

在angularjs中获得div的高度

2 个答案: