Zmienna zakresu nie aktualizuje się w DOM po detekcji zdarzeń go zmienia

Question

Mam zmienną zdefiniowaną w moim obiekcie $ scope i powiązaną w DOM. Po załadowaniu strony wartość jest wyświetlana poprawnie. Mam zdefiniowanego detektora w zdarzeniu zmiany rozmiaru okna $, które uruchamia się odpowiednio po zmianie rozmiaru okna. Umieściłem punkt przerwania w funkcji, która jest wywoływana i ma poprawną wartość picCols po uruchomieniu i zmienia się na nową wartość w oparciu o bieżącą szerokość okna. Jednak po zakończeniu funkcji DOM nie aktualizuje się z nową wartością.

Oto mój kontroler. Zmienna obserwował to $ scope.picCols

.controller('AlbumEditCtrl', function($scope, $stateParams, $window) { 
$scope.album = {id: 1, date: '8/23/2014', title: 'My Album 1', photos: 
    [ 
     {url: 'img/default-placeholder.png'}, 
     {url: 'img/default-placeholder.png'}, 
     {url: 'img/default-placeholder.png'}, 
     {url: 'img/default-placeholder.png'}, 
     {url: 'img/default-placeholder.png'}, 
     {url: 'img/default-placeholder.png'}, 
     {url: 'img/default-placeholder.png'}, 
     {url: 'img/default-placeholder.png'}, 
     {url: 'img/default-placeholder.png'}, 
     {url: 'img/default-placeholder.png'}, 
     {url: 'img/default-placeholder.png'}, 
     {url: 'img/default-placeholder.png'} 
    ]}; 
    $scope.photoRows = []; 
    $scope.picCols = 0; 

    $window.addEventListener("resize", function() { 
     if(parseInt($window.innerWidth/80, 10) != $scope.picCols) 
     { 
      $scope.recalculateImageColumns(); 
     } 
    }); 

    $scope.recalculateImageColumns = function(){ 
     var photoRows = []; 
     $scope.picCols = parseInt($window.innerWidth/80, 10); 
     console.log($scope.$id); 
     var count = 0; 
     var currentArray = -1; 
     for(var i = 0; i < $scope.album.photos.length; i++){ 
      if(count < $scope.picCols){ 
       if(count == 0){ 
        count++; 
        currentArray++; 
        photoRows.push({photos:[$scope.album.photos[i]]}); 
       } 
       else{ 
        photoRows[currentArray].photos.push($scope.album.photos[i]); 
        if(count == $scope.picCols-1) 
         count = 0; 
        else 
         count++; 
       } 
      } 
     } 
     angular.copy(photoRows, $scope.photoRows); 
    }; 
    $scope.recalculateImageColumns(); 
}); 

Oto DOM

<ion-view title="My BGCA"> 
<ion-content class="has-header padding"> 
    <h2>{{album.title}}</h2> 
    <h5>{{album.date}}</h5> 
    <h5>{{picCols}}</h5> 
    <h5>{{$id}}</h5> 
    <div class="row" ng-repeat="photoRow in photoRows"> 
     <div class="col" ng-repeat="photo in photoRow.photos"><img ng-src="{{photo.url}}" width="75" height="75" /></div> 
    </div> 
</ion-content> 
</ion-view> 

UPDATE Oto dyrektywa że skończyło się pracuje ładnie.

.directive(
"ngResize", 
function($window) { 
    function link($scope, element, attributes) { 
     var domElement = element[0]; 
     function updateImageCapacity() { 

       var viewportWidth = domElement.clientWidth; 
       var capacity = parseInt(viewportWidth/80, 10); 
       $scope.setImageCapacity(capacity); 
     } 
     updateImageCapacity();  

     window.angular.element($window).on('resize', function(){ 
      $scope.$apply(updateImageCapacity); 
     }); 

     $scope.$on(
      "$destroy", 
      function() { 
       window.angular.element($window).off('resize'); 
      } 
     ); 
    } 

    return({ 
     link: link, 
     restrict: "A" 
    }); 

} 
) 

http://www.bennadel.com/blog/2476-my-approach-to-building-angularjs-directives-that-bind-to-javascript-events.htm?&_=0.9274228068534285#comments_45548

Answer 1

$window.addEventListener("resize", function() { 
    if(parseInt($window.innerWidth/80, 10) != $scope.picCols) 
    { 
     $scope.recalculateImageColumns(); 
     $scope.$apply(); // you need to call $apply if you do anything outside of angular context; 
    } 
}); 

kątowa Way

app.directive("ngResize", function ($window) { 
    return { 
     scope: { 
      ngResize: "=" 
     }, 
     link: function ($scope, element, attrs) { 
      angular.element($window).on("resize", function() { 
       $scope.ngResize = "Smith"; 
       $scope.$apply(); 
      }); 
     } 
    } 
}); 

Dodaj dyrektywa

<div ng-controller="ctrl" ng-resize="name">{{ name }}</div> 

DEMO