如何在AngularJS的UI-Router的templateUrl函数中注入一个服务？ [英] How to inject a service into AngularJS's UI-Router templateUrl function?

问题描述

我尝试让AngularJS的UI-Router在已定义的状态（即project）上启动，如果没有匹配，则默认为root状态。 root状态应该使用远程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 / proje ct.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 这里 - 如 $ b

templateUrl （可选）

< blockquote>

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

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

传入templateUrl的参数是固定的。 / p>

因此，我们必须使用 templateProvider

templateProvider

函数

提供者函数返回HTML内容字符串。

  templateProvider：
函数（MyTemplateService，param s）{
 return MyTemplateService.getTemplate（params.pageId）; 
 
 
 
 
 
 
检查：
 
 
 
 
  Angular UI路由器：根据父解析对象决定子状态模板 
 > 
 
  Angular和UI-Router，如何设置一个动态模板 
 
 
 在AngularJs中使用UI-Router更改导航菜单 
 
 
 
I'm trying to have AngularJS' UI-Router pick up on the defined states (i.e. "project") and if none match, default to the "root" state. The "root" state should check with a remote API (Firebase) and based on the result load the appropriate view.

The example below doesn't accomplish either of those requirements:

1) "http://website.com/project" is matched to the "root" state, and not (the previously defined) "project" state.

2) "fbutil" is not defined in the "templateUrl" function, and cannot be injected.

Please help me resolve these issues.
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';
                        });
                    }
                }
            }
        })
 }
]);

解决方案
We cannot use templateUrl here - as stated in the doc:

templateUrl (optional)


  
If templateUrl is a function, it will be called with the following parameters:
  
  
{array.} - state parameters extracted from the current $location.path() by applying the current state
The parameters coming to templateUrl are fixed.

So, we have to use templateProvider

templateProvider (optional)


  
function
  
  
Provider function that returns HTML content string.


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


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


                        
这篇关于如何在AngularJS的UI-Router的templateUrl函数中注入一个服务？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！