如何动态路由Angular.js中的对象列表？

如何将此<a>标记链接到一个模板，然后根据它链接到的项目动态填充数据？如何动态路由Angular.js中的对象列表？

我是能够通过'project.html'视图像'/skreens'，'/viewpoint'，或'/dogedots'链接到任何URL，但模板不会动态填充模板内的表达式。

这是我的项目清单。

<li ng-repeat="project in projects">   
    <a href="#linkUrl">{{project.title}}</a> 
</li>

这是他们链接到（project.html）视图

<h1>{{project.title}}</h1> //right now nothing appears here :(

的<a>链路填充其HREF从

angular.module('MyWeb', ['ngRoute']) 
    .config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
     .when('/viewpoint', { 
      templateUrl: '/myWebpage/app/templates/project.html' 
      controller:'MainControl' 
     }) 
     .when('/dogedots', { 
      templateUrl: '/myWebpage/app/templates/project.html', 
      controller:'MainControl' 
     }) 
     .when('/skreens', { 
      templateUrl: '/myWebpage/app/templates/project.html' 
      controller:'MainControl' 
     }) 
     .otherwise({ 
      redirectTo: '/', 
      templateUrl: '/myWebpage/app/templates/portfolio.html' 
     }) 
    }]) 
    .controller('MainControl', function($scope){ 
     $scope.projects = [ 
     { "id": 0, "linkUrl": "skreens", "title": "Skreens"}, 
     { "id": 2, "linkUrl": "viewpoint", "title": "ViewPoint Cloud"}, 
     { "id": 1, "linkUrl": "dogedots", "title": "Doge Dots"} 
     ] 
    })

控制器加载静态数据： 'MainControl' 但项目数据不会填充模板t

来源

2015-05-06 Ian Steffy

首先，要使用ng-router进行链接，您应该使用ng-href="{{project.linkUrl}}"。你现在定义的方式将不起作用。

只要数值显示不正确，从您发布的内容来看，它并不表明您将控制器绑定到任何位置的视图。这应该发生在.when对象中。防爆。 .when('/portfolio', { controller:'MainControl', templateUrl:'/myWebpage/app/templates/portfolio.html' })

来源

2015-05-06 21:09:53 jadams

此修复确实有助于改进我的代码，但我仍然无法使用项目中每个项目的数据填充“project.html”页面。你为什么从'ng-href'中删除'#'？ –

我认为这将取决于你如何建立你的项目。我也认为我正在使用ng-router混合使用ui-router，我通常更喜欢前者，并忘记ng-router的一些细节。路由工作正常吗？否则，您可以使用'ng-href =“＃/ {{project.linkUrl}}”'来尝试。我想我正在理解你在下一页中遇到的问题。是你在portfolio.html中的链接，并链接到你想要显示标题的project.html？ – jadams

如果是这样，它是因为投资组合的范围已被销毁，并且为下一页创建的新范围（它不知道指定了哪个“项目”）应该是未定义的。您需要将该项目名称作为路由参数，然后从那里访问它，或将其存储在服务中。由于服务是单身人士，它应该保留所选项目的值，直到它被更改。 – jadams

如何动态路由Angular.js中的对象列表？

回答

相关问题