如何将服务注入 AngularJS 的 UI-Router templateUrl 函数？

Question

我正在尝试让 AngularJS 的 UI-Router 获取已定义的状态（即“项目”），如果没有匹配，则默认为“根”状态。 “根”状态应使用远程 API (Firebase) 检查并根据结果加载适当的视图。

下面的例子没有满足这些要求：

1) “http://website.com/project”匹配“根”状态，而不是（之前定义的）“项目”状态。

2）“templateUrl”函数中没有定义“fbutil”，不能注入。

请帮我解决这些问题。

angular.module('app')

.config(['$stateProvider', '$urlRouterProvider',
 function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('project', {
            url: '/project',
            views: {
                'mainView': {
                    controller: 'ProjectCtrl as project',
                    templateUrl: '/views/project.html'
                }

            }
        })
        .state('root', {
            url: '/:id',
            views: {
                'mainView': {
                    templateUrl: function($stateParams, fbutil) {
                        var ref = fbutil.ref('user_data', id);
                        ref.once('value', function(dataSnapshot) {
                            return '/views/' + dataSnapshot.$val() +'.html';
                        }, function(error) {
                            return '/views/root.html';
                        });
                    }
                }
            }
        })
 }
]);

Answer 1

我们不能在这里使用templateUrl - 如doc 中所述：

templateUrl （可选）

如果 templateUrl 是一个函数，它将使用以下参数调用：

{array.} - 通过应用当前状态从当前 $location.path() 中提取的状态参数

templateUrl 的参数是固定的。

所以，我们必须使用templateProvider

templateProvider （可选）

功能

返回 HTML 内容字符串的提供程序函数。

templateProvider:
  function(MyTemplateService, params) {
    return MyTemplateService.getTemplate(params.pageId);
  }

检查：

• Angular UI Router: decide child state template on the basis of parent resolved object
• Angular and UI-Router, how to set a dynamic templateUrl
• Changing Navigation Menu using UI-Router in AngularJs