Question

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

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>

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

Answer 1

您可以使用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);
            });
        }
    };
}]);

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

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

Answer 2

尝试将指令范围设置为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/

发生状态更改时不应用ng-class

2 个答案: