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

Question

我怎样才能使这个<a> 标记链接到一个模板，然后根据它链接到的项目动态填充数据？

我我能够通过'project.html' 视图链接到任何网址，例如'/skreens'、'/viewpoint' 或'/dogedots'， 但模板不会动态填充该模板中的表达式。

这是我的项目清单。

<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

Answer 1

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

就值未正确显示而言，从您发布的内容来看，它并没有表明您正在将控制器绑定到任何地方的视图。这应该发生在 .when 对象中。前任。 .when('/portfolio', { controller:'MainControl', templateUrl:'/myWebpage/app/templates/portfolio.html' })