发生状态变化时不应用ng类

ng-class not applied when state change occurs

本文关键字：应用 ng 状态 变化      更新时间：2023-09-26

我有一个指令应用一些类的元素基于窗口的大小:

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。然后我的ng-click使用这个值来应用我的类，如下所示:

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

它工作得很好，但我注意到，如果在我的应用程序中改变状态以导航回应用此指令的页面，则样式不会应用于元素。有人知道怎么解吗?我的印象是我添加了错误的事件处理程序;我尝试添加$stateChangeStart到。on调用，但到目前为止还不能让它工作

你可以使用css媒体查询来完成你需要的。

你面临的问题是在路由改变期间没有resize或load事件，所以在指令触发时初始化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');
   });

尝试将指令作用域设置为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/

相关文章：