javascript - $watch 仅在第一次更新 window.innerWidth 时触发

Question

我正在尝试设置我的应用程序以监视 window.innerWidth 属性，并根据该宽度向 $scope 添加一个属性。它第一次工作，但之后没有任何调整大小。 $digest 方法没有被调用吗？如果是，为什么不呢？

模块

//Initialize angular module include route dependencies

var app = angular.module("selfservice", ['ngRoute']);

app.config(function ($routeProvider) {
   $routeProvider
       .when('/', {
           templateUrl:"partials/login.html",
           controller:"login"
       });
});

Controller

app.controller("login", ['$scope', function ($scope) {


$scope.$watch(

    function () {
        return window.innerWidth;
    },

    function (newval, oldval) {
        if (newval < 700) {
            $scope.classExpand = 'expand';
        } else {
            $scope.classExpand = '';
        }

        console.log(newval, oldval);
    });



}]);

查看

<div class="small-12 column">
            <a href="/portal" class="button radius large {{classExpand}}">Sign In</a>
</div>

这是第一次工作，如果我在调整屏幕大小后刷新屏幕，则会应用扩展类，但是当我调整它大小时，什么也没有发生，console.log 函数甚至不会触发

Answer 1

调整窗口大小不会导致 Angular 重新运行 $digest 循环，所以 window.innerWidth 的值只有在其他原因导致它时才会被检查。

您应该改为使用指令(即不要在您的 Controller 中执行此工作)，绑定(bind)到 window.onresize 事件:

.directive('watchResize', function(){
  return {
    restrict: 'A',
    link: function(scope, elem, attr) {
      angular.element(window).on('resize', function(){
        scope.$apply(function(){
          scope.classExpand = (window.innerWidth < 700) ? 'expand' : '';
        });
      });
    }
  }
});

在这种情况下，您调用 scope.$apply。这会导致 $digest 循环在这个事件之后运行，这个事件在 Angular 上下文之外。

您可以使用此指令在与您正在更改的变量相同的范围内装饰元素:

<div watch-resize>
  {{ classExpand }}
</div>

Demo (最好全屏观看)