作用域变量在事件侦听器更改后未在DOM中更新 [英] Scope variable not updating in DOM after event listener changes it

问题描述

我在$ scope对象中定义了一个变量，并在DOM中对其进行了绑定. 页面加载后，该值将正确显示.我在$ window resize事件上定义了一个侦听器，该事件在调整窗口大小时会正确触发.我在要调用的函数中放置了一个断点，运行时确实具有正确的picCols值，并且确实根据当前窗口宽度将其更改为新值.但是，功能完成后，DOM不会使用新值进行更新.

I have a variable defined in my $scope object and bound in the DOM. When the page loads, the value is displayed correctly. I have a listener defined on the $window resize event which does fire appropriately when the window is resized. I put a breakpoint in the function that gets called and it does have the correct value of picCols when run and it does change to the new value based on the current window width. However after the function is finished the DOM does not update with the new value.

这是我的控制者.监视的变量是$ scope.picCols

Here is my controller. The watched variable is $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();
});

这是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 Here is the directive that ended up working nicely.

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

}
)

推荐答案

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

角度方式

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

添加指令

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

演示

这篇关于作用域变量在事件侦听器更改后未在DOM中更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！