Olay değişkeni değişiklik yaptıktan sonra DOM'da içerik değişkeni güncellenmiyor

Question

$ kapsam nesnesinde tanımlanan ve DOM'a bağlı bir değişkenim var. Sayfa yüklendiğinde, değer doğru şekilde görüntülenir. Pencereyi yeniden boyutlandırıldığında uygun şekilde ateş eden $ pencere yeniden boyutlandırma olayında tanımlı bir dinleyicim var. Çağırılan işleve bir kesme noktası koyarım ve koşarken picCols'un doğru değerine sahip olur ve geçerli pencere genişliğine göre yeni değere dönüşür. Ancak işlev bittikten sonra DOM yeni değerle güncellenmez.

İşte denetleyicim. izlenen değişken İşte 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> 

GÜNCELLEME İşte güzel çalışma sona erdi direktifi olduğunu $ 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(); 
}); 

olduğunu. Eğik Yolu

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

direktif ekle

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

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

DEMO