角度相同高度指令不起作用

Question

我创建了一个指令，以便引导行中的列具有相同的高度。

这里是代码 - http://jsbin.com/waxoboloqo/edit

但它无法正常工作。你能解决它吗？

HTML代码：

<h1>Height: {{ hei }}</h1> 
<div class="row"> 
    <div class="col-lg-6 col-1"> 
    <h1 ng-repeat="x in y" match-height>{{x}}</h1> 
    </div> 
    <div class="col-lg-6 col-2"> 

    </div>  

</div> 

CSS：

.col-lg-6 { 
    border: 1px solid; 
    min-height: 50px; 
} 

JS：

angular.module('myApp', []) 
.controller('myController', function($scope){ 
    $scope.y = [1,2,3]; 
    $scope.hei = "initial" 
}) 
.directive('matchHeight', function(){ 
    return function(scope, element) { 
    if(scope.$last){ 
     scope.hei = $(element).height(); 
     $(element).closest(".row").find(
     ".col-2").height(scope.hei); 
    } 
    } 
}); 

Answer 1

你可以试试这个。

app.directive('getHeight',function() {   
     return { 
     restrict: 'AE', 
     link: function (scope, element, attrs) { 
     scope.$watch(function(){ 
     scope.style = { 
      height:element[0].offsetHeight+'px', 
      // width:element[0].offsetWidth+'px' 
      }; 
     }); 
     } 
     }; 
}); 

<div class="col-lg-6 col-1" get-height> 
    <h1 ng-repeat="x in y">{{x}}</h1> 
    </div> 
    <div class="col-lg-6 col-2" ng-style="style"> 

    </div>