带有路由

Question

我要做的是为活动创建一个动态的发言人列表，为每个发言人创建个人简介页面。我已使用ng-repeat创建了列表，并且链接正在使用ng-href。使用角度路由我甚至得到了页面模板加载，唯一缺少的是确定如何使用特定于所选扬声器的数据填充页面模板。为了澄清，有一个动态列表，使用未知数量的发言者，每个都有一个使用相同模板的个人资料页面，但我正在努力做的是填充该模板与个别发言人的详细信息。这里有类似的问题，虽然它们似乎试图创建动态模板而不是动态内容，并且不能解决存在的问题。以下是一些现有代码：

// The routing:

.when('/profile/:name*', {
     templateUrl : 'pages/profile.html',
     controller  : 'profileController'
 })

// The lists and links on the index page...

<div class="grid" ng-repeat="speaker in home.speakers">
   <a ng-href="profile/{{speaker.url}}">
      <div>....</div>
   </a>
</div>

Answer 1

路线

在你的路线中你应该有类似

的东西

.state('Prof', {
     url: '/Prof',
     templateUrl: 'rout/to/yout/template.html'
})

服务/工厂

创建一个工厂，通过http调用从您的rest api获取数据，如下所示。

.factory('profContent', function($http){
  return {
    getContent: function(profid){
        return $http.get('http://localhost:3000/api/prof', { params: { user_id: profid });
    }
  };
});

控制器

.controller('profCtrl', ['$scope', 'profContent', function($scope, profContent){

  profContent.getContent(profid).then(function(response){
    $scope.firstName = response.data.fName;
    $scope.lastName = response.data.lName;
  });
}]);

使用控制器根据您从服务中获得的内容为视图设置$scope。

结论

您可以传递绑定到范围的参数，并使用它来查询数据库并获取正确的数据。