只要控制器在Directive中使用隐式注释,Angular Strict Di就不会抛出错误

时间:2018-01-17 11:42:34

标签: javascript angularjs

我在使用minified angularJS 1.x应用程序时面临以下问题

Uncaught Error: [$injector:unpr] Unknown provider: nProvider <- n

根据其他相关问题的建议,我在引导我们的应用程序时添加了严格的依赖注入,如下所示

angular.bootstrap(document, [app.name], { strictDi: true });

即使我添加了这个,当我的应用程序使用非缩小代码运行时,我没有遇到任何问题,但是当我缩小代码时,我面临着未知的提供程序错误。根据angularjs中的文档,如果在使用严格依赖注入时存在任何隐式注释,则会抛出错误。但不知怎的,它没有这样做。

我终于发现这个问题出现在一个指令中,该指令有一个带有$ scope隐式注释的控制器,如下所示

angular.module('MyModule', [])
.directive('myTabs', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    controller: function MyTabsController($scope) {
      var panes = $scope.panes = [];

      $scope.select = function(pane) {
        angular.forEach(panes, function(pane) {
          pane.selected = false;
        });
        pane.selected = true;
      };

      this.addPane = function(pane) {
        if (panes.length === 0) {
          $scope.select(pane);
        }
        panes.push(pane);
      };
    },
    templateUrl: 'my-tabs.html'
  };
})

使用内联数组注释后问题得到解决。

我只是想知道为什么严格迪没有抛出任何错误?我应该在代码中进行任何其他更改吗?“

1 个答案:

答案 0 :(得分:0)

我使用手动引导程序和自动引导程序方法创建了一个简单的角度应用程序,具有严格的依赖注入。

Plunker链接如下:

手动引导程序:https://plnkr.co/edit/9QoKpzzjvFHMT1ZdTIoy?p=preview

自动引导程序:https://plnkr.co/edit/kBXOpY?p=preview

我发现在两种情况下,如果控制器具有依赖的隐式注释,则为angular 在bootstrap上抛出错误如下:

angular.js:12798 Error: [$injector:strictdi] ScrollDirectiveController is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.4.12/$injector/strictdi?p0=ScrollDirectiveController
    at angular.js:68
    at Function.annotate [as $$annotate] (angular.js:3825)
    at Object.invoke (angular.js:4548)
    at extend.instance (angular.js:9435)
    at nodeLinkFn (angular.js:8540)
    at compositeLinkFn (angular.js:7975)
    at nodeLinkFn (angular.js:8571)
    at compositeLinkFn (angular.js:7975)
    at compositeLinkFn (angular.js:7978)
    at publicLinkFn (angular.js:7855)

我们的应用程序中的问题是控制器定义使用内联数组注释而没有指定任何依赖关系,如下面的代码所示:

function scrollDirective($window) {
  return {
    restrict: 'A',
    scope: {
      callback: '&scrollDirective'
    },
    link: function(scope, element, attrs) {
         //some code here
    },
    controller: [function ScrollDirectiveController($scope) {
      console.log("controller loaded!!");
    }]
  };

我也创建了同样的插件:https://plnkr.co/edit/nkzvmeoeV9ARHVMzWHFI?p=preview

在这种情况下,angular不会抛出任何错误