更改URL時綁定到數據

我正在構建使用ui路由器的應用程序。在我的/團隊路線上，我有一個表單，用戶可以添加一個團隊名稱，然後將名稱推送到我的MongoDB並綁定到視圖並顯示團隊名稱，其中包含多個選項，其中一個是鏈接到頁面的按鈕可以爲團隊添加更具體的信息。我的路由工作在這方面，例如，url顯示爲/#/teams/oklahoma或/#/teams/washington。這裏是我的路由是什麼樣子：更改URL時綁定到數據

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（）函數的任何信息。我的問題是，如何在新視圖中使用新網址綁定到我的{{team.title}}和其他相關信息？我知道一個工廠必須以某種方式參與進來，並且我嘗試了在http://onehungrymind.com/angularjs-communicating-between-controllers/上描述的解決方案，但沒有成功。任何額外的指導將非常感激。

來源

2014-10-06 gjanden

如果您正在使用嵌套的意見的話，你的國家名稱不正確，而不是團隊/：標題，它應該是teams.title。 – 2014-10-06 15:33:43

我試過這個，但它導致.otherwise被觸發並將我送回'/'。有沒有辦法做一個嵌套視圖以外的東西？ – gjanden 2014-10-07 17:15:54

我想要做的就是刪除/ teams視圖，並將其替換爲僅點擊一個團隊的具體細節。 – gjanden 2014-10-07 17:50:50

該URL可能應包含團隊ID。我將假設你的'團隊'數組是使用來自後端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>

來源

2014-10-07 18:30:00

更改URL時綁定到數據

回答

相關問題