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

控制器

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的值。

您应该使用指令（即，不要在您的控制器中执行此操作），绑定到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（最佳观看全屏）

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

1 个答案: