当前位置: 首页 > 面试题库 >

AngularJS-如何在生成templateUrl时使用$ routeParams?

孙书
2023-03-14
问题内容

我们的应用程序具有2级导航。我们想使用AngularJS $routeProvider动态地向提供模板<ng-view />。我正在考虑做一些类似的事情:

angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/:primaryNav/:secondaryNav', {
        templateUrl: 'resources/angular/templates/nav/'+<<primaryNavHere>>+'/'+<<secondaryNavHere>>+'.html'
    });
}]);

我只是不知道该如何填充<<>>。我知道primaryNav和secondaryNav绑定到$ routeParams,但是如何在这里访问$
routeParams以便动态提供模板?


问题答案:

我找不到注入和使用该$routeParams服务的方法(我认为这是一个更好的解决方案),我尝试过这种想法,认为它可能会起作用:

angular.module('myApp', []).
    config(function ($routeProvider, $routeParams) {
        $routeProvider.when('/:primaryNav/:secondaryNav', {
            templateUrl: 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html'
        });
    });

产生此错误:

未知提供者:myApp中的$ routeParams

如果无法执行类似的操作,则可以将其更改templateUrl为指向刚刚具有的部分HTML文件,ng- include然后使用来在控制器中设置URL,$routeParam如下所示:

angular.module('myApp', []).
    config(function ($routeProvider) {
        $routeProvider.when('/:primaryNav/:secondaryNav', {
            templateUrl: 'resources/angular/templates/nav/urlRouter.html',
            controller: 'RouteController'
        });
    });

function RouteController($scope, $routeParams) {
        $scope.templateUrl = 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html';
    }

以此为你 urlRouter.html

<div ng-include src="templateUrl"></div>


 类似资料:
  • 问题内容: 这就是我要完成的工作: 基本上,我想使用uri确定使用哪个模板。目前,我收到一个错误,提示我未理解pageName。有什么不同的方式可以做到这一点?谢谢! 问题答案: 可以是接受路由参数对象的函数:

  • 问题内容: 因此从Angular 1.1.4开始,您可以拥有一个动态模板网址。从这里, templateUrl-与模板相同,但是从指定的URL加载模板。由于模板加载是异步的,因此在加载模板之前,将暂停编译/链接。 您可以将templateUrl指定为表示URL的字符串,或者指定为使用两个参数tElement和tAttrs(在下面的编译函数api中进行描述)并返回表示URL的字符串值的函数。 我如何

  • 问题内容: 我正在使用Jasmine编写AngularJS的指令测试,并与它们一起使用templateUrl:https : //gist.github.com/tanepiper/62bd10125e8408def5cc 但是,当我运行测试时,我得到了要点中包含的错误: 从我在文档中阅读的内容来看,我认为自己做得正确,但是事实并非如此-我在这里想念的是什么? 谢谢 问题答案: 如果您使用的是ng

  • 问题内容: 我正在d3可视化中尝试使用angularjs 工具提示指令,所以我有类似 但是,工具提示未显示。我需要什么吗?我也尝试过将它包装起来,但这没有用。 问题答案: 我有一个类似的问题,是的,用解决了。我假设您的d3代码位于自定义指令中。从那里可以添加工具提示属性,删除自定义指令属性,以便$ compile仅运行一次,然后调用$ compile: $ compile服务可确保使用指令添加的属

  • 问题内容: 我只是在学习Angularjs,以及如何使用templateUrl加载模板。 我有一个简单的指令: 我尝试使用这样的指令: 打开页面后,出现以下异常: 我没有确定要跨域加载模板文件(te.html与default.html处于同一折叠)。 有人可以帮我弄清楚发生了什么吗? 问题答案: 问题是您正在使用文件协议(使用协议)运行示例,并且许多浏览器(Chrome,Opera)在使用协议时都

  • 问题内容: 我想问你是否可以帮我这个忙。 我在这里用我的问题创建了一个jsfiddle 。我需要使用ng-model =“ my _ {{$ index}}”方式在ng-repeater中动态生成一些带有ng-model的输入。 在jsfiddle中,您可以看到一切正常,直到我尝试动态生成它为止。 HTML将是: 还有javascript … 你能给我个主意吗? 非常感谢。 问题答案: 它能解决您