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

Question

我正在尝试让AngularJS的UI-Router选择已定义的状态(即"project"),如果没有匹配,则默认为"root"状态."root"状态应检查远程API(Firebase)并根据结果加载相应的视图.

以下示例未完成以下任一要求:

1)" http://website.com/project "与"root"状态匹配,而不是(先前定义的)"project"状态.

2)"fbutil"未在"templateUrl"函数中定义,并且无法注入.

请帮我解决这些问题.

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中所述：

模板网址（可选）

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

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

传入 templateUrl 的参数是固定的。

所以，我们必须使用templateProvider

模板提供者（可选）

功能

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

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

查看：

• Angular UI Router：根据父解析对象决定子状态模板
• Angular 和 UI-Router，如何设置动态 templateUrl
• 在 AngularJs 中使用 UI-Router 更改导航菜单