Question

我正在看这段代码：

app.directive('resizer', ['$window', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {            
            angular.element($window).on('resize', function () {
                $window.innerWidth > 500 ? 
                    elem.addClass('large') : elem.removeClass('large')
            });
        }
    }
}]);

来源：SO Link

我想把它放在一个单独的文件中，所以在我的app依赖项中我已经完成了：

var app = angular.module('app', [.....]) .directive("resizer", resizer)

然后在我写的新文件中：

var resizer = function() {
  return {
      restrict: 'A',
      link: function (scope, elem, attires, $window) {
          angular.element($window).on('resize', function () {
              $window.innerWidth > 500 ?
                  elem.addClass('large') : elem.removeClass('large')
          });
      }
  }
}

然而它没有用 - 有人可以帮我理解这里的错误。

感谢。

Answer 1

您可以使用以下方法执行此操作：

angular.module('app').directive('resizer', ['$window', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {            
            angular.element($window).on('resize', function () {
                $window.innerWidth > 500 ? 
                    elem.addClass('large') : elem.removeClass('large')
            });
        }
    }
}]);

你必须在具有依赖关系的某个地方之前初始化你的模块：

angular.module('app', [.....]);

您的代码无法正常工作的原因，可能是您将指令命名为错误。在第一个示例中，您编写了resizer，在第二个示例中，您将其命名为resize。

Angular - 如何将自定义指令移动到单独的文件中

1 个答案: