Question

试图找出一个＆＃39; Angular特定的＆＃39;尝试实现这一目标的方法。我有一个包含一些观点的页面。当用户点击锚点时，视图会发生变化，我的工作正常。

我很好奇，如果用户点击，是否可以存储变量（比如内部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函数动态构建网址。此函数接受路径参数的对象：

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

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

1 个答案: