ng-class 状态改变时不应用

Question

我有一个指令根据 window 大小在元素上应用一些类：

angular.module( 'myApp' ).directive('resizer', ['$window', function ($window) {
    return {
        link: function (scope, elem, attrs) {      
            angular.element($window).on('load resize', function () {
                scope.$apply(function(){
                    scope.isSmall = $window.innerWidth < 800 ? true : false;
                });
            });
            angular.element($window).on('$stateChangeStart', function () {
                scope.$apply(function(){
                    scope.isSmall = $window.innerWidth < 800 ? true : false;
                });
            });
        }
    };
}]);

基本上它设置：isSmall 为 true 或 false 基于 window 宽度。然后我的 ng-click 使用这个值来应用我的类像这样：

<div resizer ng-class="{ 'class1 class2 class': isSmall }"></div>

一切正常，但我注意到，如果我的应用程序中的状态更改为导航回应用了此指令的页面，则样式不会应用于该元素。任何人都知道我将如何解决这个问题？我的印象是我添加了错误的事件处理程序；我尝试将 $stateChangeStart 添加到 .on 调用中，但到目前为止还无法使其正常工作

Answer 1

尝试将指令范围设置为 true

return {
  restrict: 'A',
  scope: false,
  link: function (scope, elem, attrs) {      
    angular.element($window).on('load resize', function () {
      scope.$apply(function(){
        scope.isSmall = $window.innerWidth < 800 ? true : false;
      });
    });
  }
};

因此父级的范围将发生变化，相关元素将收到变化。

祝你好运！希望这有帮助:)

参考：http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

Answer 2

您可能可以使用 css 媒体查询来完成您需要的工作。

您面临的问题是在路由更改期间没有调整大小或加载事件，因此只需在指令触发时初始化 scope.isSmall，而不仅仅是在事件处理程序中

angular.module('myApp').directive('resizer', ['$window', function ($window) {

    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            function setIsSmall() {
                scope.isSmall = $window.innerWidth < 800 ? true : false;
            }
            // when directive fires
            setIsSmall();

            angular.element($window).on('load resize', function () {
                scope.$apply(setIsSmall);
            });
        }
    };
}]);

注意：也可以考虑在范围销毁期间删除此处理程序，以避免一遍又一遍地添加它。这可能会对应用程序的其他部分产生影响，但是如果设置了任何其他侦听器

  scope.$on('$destroy', function(){
     $window.off('load resize');
   });

ng-class 状态改变时不应用

ng-class not applied when state change occurs

javascript

angularjs

angularjs-ng-click