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>

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

1 个答案: