如何将服务注入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 （可选）

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

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

进入templateUrl的参数是固定的。

所以，我们必须使用templateProvider

templateProvider （可选）

功能

返回HTML内容字符串的Provider函数。

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

校验：

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