Как связать DOM свойство в директиве

Question

Учитывая этот пример:

var SomeApp = angular.module('SomeApp', []) 
 
    .controller('SomeController', function($scope){ 
 
    $scope.items = [0,1,2,3] 
 
    }) 
 
    .directive('gridResize', function(){ 
 
    return { 
 
     scope: true, 
 
     link: function(scope, elem) { 
 
     scope.gridResize = { 
 
      width: $(elem).width(), 
 
      height: $(elem).height() 
 
     }; 
 
     } 
 
    } 
 
    })

.parent { 
 
    width: 80%; 
 
    position: relative; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    border: 1px solid red; 
 
} 
 
.parent > * { 
 
    background-color: rgba(0,0,0,.14); 
 
    margin-bottom: 1px; 
 
    padding: 20px; 
 
    box-sizing: border-box; 
 
} 
 
.parent > *:last-child { 
 
    margin-bottom: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="SomeApp"> 
 
    <div class="parent" ng-controller="SomeController" grid-resize> 
 
    <div ng-style="{'min-height':($parent.gridResize.width/8) + 'px'}" 
 
     ng-repeat="item in items" 
 
     > 
 
     height: {{$parent.gridResize.height}} | width: {{$parent.gridResize.width}} 
 
    </div> 
 
    </div> 
 
</div>

Может кто-нибудь сказать мне, как я мог бы связать высоту и ширину grid-resize директивы к элементу DOM? Я хочу, чтобы угловые свойства менялись при изменении элемента DOM.

Answer 1

В вашей директиве используйте окно «Изменить размер» событие, чтобы обновить размеры на объем:

var SomeApp = angular.module('SomeApp', []) 
    .controller('SomeController', function($scope){ 
    $scope.items = [0,1,2,3] 
    }) 
    .directive('gridResize', function(){ 
    return { 
     scope: false, 
     link: function(scope, elem) { 
     scope.gridResize = { 
      width: $(elem).width(), 
      height: $(elem).height() 
     }; 
     angular.element(window).on('resize', function(e) { 
      scope.gridResize = { 
       width: $(elem).width(), 
       height: $(elem).height() 
      }; 
      scope.$apply(); 
     }); 
     } 
    } 
    }) 

заметить также, что я изменил сферу дИРЕКТИВЫ на «ложь». У вас уже есть область действия над элементом, созданным директивой ng-controller.