AngularJS - 将变量传递给`$ routeProvider`

Question

试图找出一种'Angular specific'方法来尝试实现这一目标.我有一个包含一些观点的页面.当用户单击锚点时,视图会发生变化,我的工作正常.

我很好奇的是,如果用户点击,是否可以存储变量(比如内部html)然后将其传递给$routeProvider更加动态加载视图？

因此,对于锚标签#name1,将显示该视图的时候,我可以传递name1到nameHolder作为一个变量的一些文件加载具有相同的名称.

HTML

<script type="text/ng-template" id="this.html">    
  This Page.
</script>
<script type="text/ng-template" id="that.html">
  That Page.
</script>

<div>
  <ul>
    <li><a href="#/this">this</a></li>
    <li><a href="#/that">that</a></li>
  </ul>
  <ng-view></ng-view>
</div>

JS

var nameHolder= [];

var app = angular.module( "myApp", ['ngRoute'] );

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/' + nameHolder, {
        templateUrl: nameHolder + ".html",
        controller: 'individ',
        nameofuser: nameHolder
    }).
      when('/', {
        templateUrl: 'this.html'
    });
}]);

app.controller('individ', function($scope, $route) {
  $scope.img =  $route.current.nameofuser;
});

$(document).ready(function(){
  $('a').click(function(){
    nameHolder.length = 0;
    var pushThis = $(this).text();
    nameHolder.push(pushThis);
    console.log(nameHolder)
  });
});

谢谢你的任何信息.

这是一个JSFiddle

Answer 1

您可以使用函数templateUrl来动态构建url.此函数接受路由参数的对象:

$routeProvider.
    when('/:nameHolder', {
        templateUrl: function(params) {
            return params.nameHolder + ".html";
        },
        controller: 'individ',
        nameofuser: nameHolder
}).