AngularJS-将变量传递到$ routeProvider中

问题描述

试图找出一种特定于角度"的方法来尝试实现这一目标.我的页面上有一些意见.当用户单击锚点时，视图会发生变化，而我的工作就很好了.

Trying to figure out an 'Angular specific' way to try and achieve this.I have a page with some views. When a user clicks an anchor, the views change, which I have working just fine.

我很好奇的是，如果用户单击，是否可以存储变量(例如内部html)，然后将其传递给 $ routeProvider 来加载更多视图动态地?

What I'm curious is, if when the user clicks, is it possible to store a variable (say the inner html) then pass it to the $routeProvider to load the view a bit more dynamically?

因此对于锚标记#name1 ，当显示该视图时，我可以将 name1 传递给 nameHolder 作为变量来加载一些文件同名.

So for anchor tag #name1, when that view is displayed, I can pass name1 into nameHolder as a variable to load some files with the same name.

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

推荐答案

您可以将函数用于 templateUrl 来动态构造url.该函数接受一个路由参数对象:

You can use function for templateUrl to dynamically construct url. This function accepts an object of route parameters:

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

这篇关于AngularJS-将变量传递到$ routeProvider中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！