如何将服务注入AngularJS'的UI路由器templateUrl函数

How to inject a service into AngularJS's UI-Router templateUrl function?

本文关键字：UI 路由器 函数 templateUrl 服务 注入 AngularJS      更新时间：2023-09-26

我正在尝试让AngularJS的UI路由器接收定义的状态（即"项目"），如果没有匹配，则默认为"根"状态。"根"状态应使用远程API（Firebase）进行检查，并根据结果加载适当的视图。

下面的例子不能满足这两个要求：

1） "http://website.com/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';
                        });
                    }
                }
            }
        })
 }
]);

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

templateUrl（可选）

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

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

templateUrl中的参数是固定的。

因此，我们必须使用templateProvider

templateProvider（可选）

功能

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

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

检查：

  • Angular UI Router：根据父解析对象决定子状态模板
  • Angular和UI路由器，如何设置动态模板URL
  • 在AngularJs中使用UI路由器更改导航菜单
相关文章：