ng-annotate和解析ui-router中的方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ng-annotate和解析ui-router中的方法相关的知识,希望对你有一定的参考价值。

我的解决方法没有得到他们注入的服务,我遇到了一些问题。我的代码看起来像这样:

(function () {
    'use strict';

    angular.module('sapphire.sample-limits').config(routes);

    function routes($stateProvider) {

        console.log('sample limit routes have loaded');

        $stateProvider
            .state('sample-limits', list())
            .state('sample-limits.summary', summary())
            .state('sample-limits.summary.settings', settings())
            .state('sample-limits.summary.references', references());

        //////////////////////////////////////////////////

        function list() {
            console.log('trying to load the list sample limit route');

            return {
                url: '/sample-limits',
                templateUrl: 'app/sample-limits/sample-limits.html',
                controller: 'SampleLimitController',
                controllerAs: 'controller',
                resolve: {
                    categories: categories
                },
                data: {
                    claims: ['Sampling'],
                    pageTitle: 'Sample limits'
                }
            };
        };

        function summary() {
            return {
                url: '/{category}',
                templateUrl: 'app/sample-limits/sample-limits-summary.html',
                controller: 'SampleLimitSummaryController',
                controllerAs: 'controller',
                resolve: {
                    activate: activate
                },
                data: {
                    claims: ['Sampling'],
                    pageTitle: 'Sample limits - Summary'
                }
            };
        };

        function settings() {
            return {
                url: '/settings',
                views: {
                    '@sample-limits': {
                        templateUrl: 'app/sample-limits/sample-limits-settings.html',
                        controller: 'SampleLimitSettingsController',
                        controllerAs: 'controller'
                    }
                },
                resolve: {
                    activate: activate
                },
                data: {
                    claims: ['Sampling'],
                    pageTitle: 'Sample limits - Settings'
                }
            };
        };

        function references() {
            return {
                url: '/references/{reference}',
                views: {
                    '@sample-limits': {
                        templateUrl: 'app/sample-limits/sample-limits-references.html',
                        controller: 'SampleLimitReferencesController',
                        controllerAs: 'controller'
                    }
                },
                resolve: {
                    activate: activate
                },
                data: {
                    claims: ['Sampling'],
                    pageTitle: 'Sample limits - Groups'
                }
            };
        };

        //////////////////////////////////////////////////

        function categories(sampleLimitsService) {
            return sampleLimitsService.list();
        };

        function activate($stateParams, categories, selections) {
            categories.forEach(function (category) {
                if (category === $stateParams.category) {
                    if (selections.selected.indexOf(category) === -1) {
                        selections.select(null, category);
                    }
                }
            });
            return true;
        };
    };
})();

但ng-annotate并没有注入服务。我知道我做错了什么,但有人可以帮我搞清楚什么吗?

答案

我刚在每种方法之前添加了/* @ngInject */注释并且它有效:

(function () {
    'use strict';

    angular.module('sapphire.sample-limits').config(routes);

    function routes($stateProvider) {

        $stateProvider
            .state('sample-limits', list())
            .state('sample-limits.summary', summary())
            .state('sample-limits.summary.settings', settings())
            .state('sample-limits.summary.references', references());

        //////////////////////////////////////////////////

        function list() {            
            return {
                url: '/sample-limits',
                templateUrl: 'app/sample-limits/sample-limits.html',
                controller: 'SampleLimitController',
                controllerAs: 'controller',
                resolve: {
                    categories: categories
                },
                data: {
                    claims: ['Sampling'],
                    pageTitle: 'Sample limits'
                }
            };
        };

        function summary() {
            return {
                url: '/{category}',
                templateUrl: 'app/sample-limits/sample-limits-summary.html',
                controller: 'SampleLimitSummaryController',
                controllerAs: 'controller',
                resolve: {
                    activate: activate
                },
                data: {
                    claims: ['Sampling'],
                    pageTitle: 'Sample limits - Summary'
                }
            };
        };

        function settings() {
            return {
                url: '/settings',
                views: {
                    '@sample-limits': {
                        templateUrl: 'app/sample-limits/sample-limits-settings.html',
                        controller: 'SampleLimitSettingsController',
                        controllerAs: 'controller'
                    }
                },
                resolve: {
                    activate: activate
                },
                data: {
                    claims: ['Sampling'],
                    pageTitle: 'Sample limits - Settings'
                }
            };
        };

        function references() {
            return {
                url: '/references/{reference}',
                views: {
                    '@sample-limits': {
                        templateUrl: 'app/sample-limits/sample-limits-references.html',
                        controller: 'SampleLimitReferencesController',
                        controllerAs: 'controller'
                    }
                },
                resolve: {
                    activate: activate
                },
                data: {
                    claims: ['Sampling'],
                    pageTitle: 'Sample limits - Groups'
                }
            };
        };
    };

    //////////////////////////////////////////////////

    /* @ngInject */
    function categories(sampleLimitsService) {
        return sampleLimitsService.list();
    };

    /* @ngInject */
    function activate($stateParams, categories, selections) {
        categories.forEach(function (category) {
            if (category === $stateParams.category) {
                if (selections.selected.indexOf(category) === -1) {
                    selections.select(null, category);
                }
            }
        });
        return true;
    };
})();

以上是关于ng-annotate和解析ui-router中的方法的主要内容,如果未能解决你的问题,请参考以下文章

将ui-router解析注入指令

如何在 ui-router 解析器中重定向?

ui-router 使用动态参数解析

Internet Explorer 9 无法解析 Angular UI-Router

如何在基于 angular-cli 的混合应用程序中使用 ng-annotate

angular ui-router:在解析中获取 toState 的 $state 信息