如何在AngularJS的UI-Router的templateUrl函数中注入一个服务？

本文介绍了如何在AngularJS的UI-Router的templateUrl函数中注入一个服务？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我尝试让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 （可选） 如果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 stateThe parameters coming to templateUrl are fixed.So, we have to use templateProvidertemplateProvider (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 objectAngular and UI-Router, how to set a dynamic templateUrlChanging Navigation Menu using UI-Router in AngularJs 这篇关于如何在AngularJS的UI-Router的templateUrl函数中注入一个服务？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！