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

templateUrl （可选）

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

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

来到templateUrl的参数是固定的。

所以，我们必须使用templateProvider

templateProvider （可选）

功能

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

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

检查：

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

1 个答案:

templateUrl （可选）

templateProvider （可选）