Question

我正在构建一个使用ui-router的应用程序。在我的/团队路线上，我有一个表单，用户可以在其中添加团队名称，然后将名称推送到我的MongoDB并绑定到视图并显示具有多个选项的团队名称，其中一个是链接到页面的按钮可以为团队添加更具体的信息。我的路由工作正常，网址显示为/#/teams/oklahoma或/#/teams/washington。这是我的路由的样子：

app.config(
    ['$stateProvider','$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/');
    .state('teams', {
        url: '/teams',
        templateUrl: './templates/main/league.html',
        controller: 'leagueCtrl'
    })
    .state('teams/:title', {
        url: '/teams/:title',
        templateUrl: './templates/main/team.html',
        controller: 'teamCtrl'
    })

以下是/teams/:title路线的链接：

<a href="#subjects/{{ team.title | lowercase }}">
    <button ng-click="viewTeam(team)" class="team-button">View</button>
</a>

目前我的viewTeam（）函数中没有任何内容。我的问题是如何使用新URL绑定到我的{{team.title}}和新视图中的其他相关信息？我知道工厂必须以某种方式参与，我尝试实施http://onehungrymind.com/angularjs-communicating-between-controllers/中描述的解决方案但没有成功。非常感谢任何其他指导。

Answer 1

网址应该包含团队ID。我将承担你的团队＆＃39;使用来自某些后端API的$ http加载数组。

app.config(
    ['$stateProvider','$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/');

    .state('teams', {
        url: '/teams',

        // the `teams` state will wait to load until $http.get() call is completed.
        // this resolve declaration will provide the resulting teams array as an injectable 'teams' object.
        resolve: { teams: function($http) { return $http.get("/teams.json"); },

        templateUrl: './templates/main/league.html',

        // This simplified controller injects the 'teams' resolve and simply sticks the list of teams on the scope to ng-repeat etc.
        controller: function($scope, teams) { $scope.teams = teams; } 
    })


    // This is a nested state, called `teams.team`.  It requires a `teamId` parameter.  
    // The parameter can be provided by a URL: http://localhost/app#/teams/9237594827
    // The parameter can be provided by $state.go: $state.go('teams.team', { teamId: 9237594827 });
    // The parameter can be provided by uiSref: <a ui-sref="teams.team({ teamId: repeatedTeam.id })">{{repeatedTeam.title}}</a>
    .state('teams.team', {
        // `teams.team` state declares a `teamId` state parameter in the URL
        url: '/teams/:teamId',

        // This resolve function uses $stateParams to locate the correct team from the list.
        // `team` will be made available for injection
        resolve: { 
          team: function($stateParams, teams) {

            // Find the correct team from the `teams` array, by ID.
            return teams.filter(function(team) { return team.id === $stateParams.teamId; })[0];
          }
        },

        templateUrl: './templates/main/team.html',

        // Inject the `team` resolve and put it on $scope
        controller: function($scope, team) { $scope.team = team; }
    })

league.html：

 <ul>
   <li ng-repeat="team in teams">
     <a ui-sref="teams.team({ teamId: team.id })">{{team.title}}</a>
   </li>
 </ul>

更改URL时绑定到数据

1 个答案: