AngularJS element.bind ('resize') не обновляет переменную $ scope

Question

Я пытаюсь установить переменную scope для innerWidth окна браузера, используя следующий код. Он работает при просмотре в консоли, но функция не обновляет переменную $ scope. Зачем?

angular.element($window).bind('resize', function() { 
    console.log('resize', $window.innerWidth); // I can see change here 
    $scope.window_width = $window.innnerWidth; // no change here 
}); 

Answer 1

Вы что-то с jQlite, которая живет за пределами Угловая связывания, поэтому следует вручную для вызова цикла $digest здесь, в противном случае Угловые не знают, что есть изменения.

angular.element($window).bind('resize', function() { 
    console.log('resize', $window.innerWidth); 
    $scope.window_width = $window.innerWidth; 
    $scope.$evalAsync(); 
}); 

$scope.$evalAsync() будет вызывать цикл дайджеста с большей вероятностью стрельбы внутри одного Js события тик затем $timeout (подробнее here)

Answer 2

Попробуйте это:

$scope.$apply(function() { $scope.window_width = $window.innnerWidth; }) 

привязывается событие DOM, так должно заставить угловую переварить фазы, в

Answer 3

вы сделали глупая ошибка, может быть, когда вы набрав вопрос ,

$scope.window_width = $window.innnerWidth; //innnerWidth should be innerWidth 

и после обновления переменной области, которую нужно запустить цикл дайджеста вручную, вызвав $scope.$digest();, потому что изменение размера что-то происходит за пределами углового, поэтому мы должны сказать угловатых есть что-то обновить в объеме.

что еще мы можем использовать вместо $digest()?

1. вы можете завернутый код в $timeout будет инициировать цикл переварить самого

   $timeout(function() { $scope.window_width = $window.innerWidth; });

2. использование $scope.$apply(); как

   $scope.window_width = $window.innerWidth; $scope.$apply();

он re is a demo