组件无法解析$ scope的注入(角度1.3.16)

时间:2015-07-14 13:02:27

标签: javascript angularjs angularjs-directive dependency-injection components

我遇到了一个非常奇怪的错误。我正在开展一个我们正在使用John Papa's AngularJS styleguide的项目。

我将以下组件文件my-profile.component.js附加到app.mymodule

我-profile.component.js

(function() {
    'use strict';

    angular
        .module('app.mymodule')
        .component('myProfile', { })
        .controller('MyProfileController', myProfileController);

    /*@ngInject*/
    function myProfileController($scope) {

        ...

    }
})();

在我的视图文件中使用该组件进行渲染。

app.mymodulemymodule.module.js

中定义

mymodule.module.js

(function () {
    'use strict';

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

})();

app中定义了app.modules.js,其中app.mymodule被设置为应用依赖

app.modules.js

(function() {
    'use strict';

    angular
        .module('app', [

            ...
            'app.mymodule'
        ]);

})();

my-profile.component.js编译为以下代码

my-profile.component.js (已编译)

(function() {
    'use strict';

    angular
        .module('app.mymodule')
        .component('myProfile', { })
        .controller('MyProfileController', myProfileController);

    myProfileController.$inject = ['$scope'];
    function myProfileController($scope) {

        ...

    }

})();

但由于某种原因,angular无法注入$scope - 服务或我尝试注入的任何其他服务。 It produces the following error

Error: [$injector:unpr] Unknown provider: 1FilterProvider <- 1Filter
http://errors.angularjs.org/1.3.16/$injector/unpr?p0=1FilterProvider%20%3C-%201Filter
    at REGEX_STRING_REGEXP (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7eNaNbundles%fjs%fvendor:63:12)
    at /layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:4031:19
    at Object.getService [as get] (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:4178:39)
    at /layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:4036:45
    at Object.getService [as get] (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:4178:39)
    at $get [as $filter] (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:16705:24)
    at Parser.filter (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:12234:19)
    at Parser.filterChain (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:12228:19)
    at Parser.primary (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:12079:22)
    at Parser.unary (/layout/js/vendor/angularjs-1.3.16/angular.js?bundleVirtualPath=%7e%fbundles%fjs%fvendor:12374:19)

我在同一个文件夹中有另一个组件,连接到同一个模块,我可以轻松注入任何服务。它看起来如下:

(function () {
    'use strict';

    angular
        .module('app.mymodule')
        .component('loginView', { })
        .controller('LoginViewController', loginViewController);



    /*@ngInject*/
    function loginViewController($scope, $location) {
        ...
    }

})();

我真的无法弄清楚我做错了什么。我已经拼写检查,双重检查,重新启动组件,试图在控制器上手动注入$ scope,但无济于事。

有没有人知道这里发生了什么? :)

修改

正如rolandjitsu指出的那样,我的视图文件中存在问题。我错误地使用了ng-pattern,但由于我自己无法解释角度控制台错误以及角度文档中的“温和”误导性错误描述而误导。

1 个答案:

答案 0 :(得分:2)

是的,您似乎错过了一个名为$scope的服务提供商。可能缺少模块或某些文件丢失了?

注意:它与var id = $(this).data("tab-content"); var name = $(this).text(); // Get the content from the nth element in the other list (using the index of the LI clicked) var content = $('#tabs-content-template .tab-content').eq($(this).index()).text(); 无关,因此不会失败。