Variabile dell'ambito non aggiornata in DOM dopo che il listener di eventi lo ha modificato.

Question

Ho una variabile definita nel mio oggetto $ scope e associata nel DOM. Quando la pagina viene caricata, il valore viene visualizzato correttamente. Ho un listener definito sull'evento di ridimensionamento della finestra $ che si attiva in modo appropriato quando la finestra viene ridimensionata. Metto un punto di interruzione nella funzione che viene chiamata e ha il valore corretto di picCols quando viene eseguito e cambia il nuovo valore in base alla larghezza della finestra corrente. Tuttavia, al termine della funzione, il DOM non si aggiorna con il nuovo valore.

Ecco il mio controller. La variabile è guardato $ 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(); 
}); 

Ecco il 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 Ecco la direttiva che ha finito per lavorare bene.

.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; 
    } 
}); 

angolare 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(); 
      }); 
     } 
    } 
}); 

Aggiungi direttiva

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

DEMO