Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs – 如何访问视图外的路径参数大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在编写一个非常简单的Angular应用程序来显示有关足球锦标赛的信息.对于数据库中的每个锦标赛,我想显示匹配或统计信息的视图,所以我正在实现这个简单的URL方案:

> foo / matches:锦标赛Foo的比赛,
> foo / stats:锦标赛Foo的统计数据.

index.html文件的结构如下:

<nav ng-controller="NavController">
  <ul>
    <li> <a href="#/{{ t }}/matches"> Matches </a> 
    <li> <a href="#/{{ t }}/status">  Stats </a>
  </ul>
</nav>

<div ng-view></div>

并且路由配置如下:

app.config(['$routeProvider',function ($routeProvider) {
  $routeProvider
    .when('/:t/matches',{templateUrl: 'partials/matches.html',controller: 'MatchesController'})
    .when('/:t/stats',{templateUrl: 'partials/stats.html',controller: 'StatsController'  })
}]);

我的问题是HTML中的{{t}}个链接.我想要链接将视图更改为当前锦标赛的统计数据或匹配列表.但由于链接在视图之外,所以他们无法访问路由参数(我尝试注入$routeParams,而我得到的只是一个空对象).

总之,我无法创建用于更改其外部视图的链接.导航栏不知道当前的锦标赛是什么.

我怎样才能(以及最好的方法)访问视图的当前状态(在本例中为当前锦标赛)?

解决方法

reading a bit about scopes之后,我学会了他们如何筑巢.我只是通过用新控制器包装视图和导航栏来解决我的问题:

<div ng-controller="NavController">

  <nav>
    <ul>
      <li> <a href="#/{{ t }}/matches"> Matches </a> 
      <li> <a href="#/{{ t }}/status">  Stats </a>
    </ul>
  </nav>

  <div ng-view></div>

</div>

视图将原型继承NavController的范围.我在外部作用域中初始化了一个对象,并将所需的值分配给内部控制器中的一个属性

app.controller('NavController',function ($scope) {
     $scope.currentTournament = {};
 });

 app.controller('MatchesController',function ($scope,$routeParams) {
     // ...
     $scope.currentTournament.id = $routeParams.t;
 });

 app.controller('StatsController',$routeParams) {
     // ...
     $scope.currentTournament.id = $routeParams.t;
 });

大佬总结

以上是大佬教程为你收集整理的angularjs – 如何访问视图外的路径参数全部内容,希望文章能够帮你解决angularjs – 如何访问视图外的路径参数所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。