AngularJS跨视图变量（相同的控制器）

Question

我有一个AngularJS应用程序，（现在）只有一个控制器，但多个视图。所有这些数据都通过$http提取。

从一个角度来看，它有'联盟'ng-repeat。它有一个按钮，其中有一个ng-click来获取该联盟的球队数量和每个球队的球员数量，并将它们传递给一个函数并将它们设置为变量。该功能还将视图重定向到另一页$location。

在该页面中，它具有绑定来查看这些变量。但是，没有任何表现。它可以提供LOG的信息，但当视图更改时它不会显示它。

这是我的git repo。

1. leagues.html第27行为ng-click，用于调用下面列表项目3中的函数并发送到teams.html。
2. teams.html，以显示变量（用于测试，我只是想创造另一个NG-重复之前显示它们）
3. public/javascripts/app.js 63行的渲染变量的函数。

对此，大多数的答案倾向于说“使用不同的视图”或“使用ui路由器”。为什么这不起作用？

请在下面看看我的代码片段。

leagues.html

<div class="container col-md-12"> 
    <h1>Manage Leagues</h1> 
    <div class="table-responsive"> 
     <table class="table"> 
      <tr> 
       <th>League Name</th> 
       <th>Location</th> 
       <th>Start Date</th> 
       <th>Duration</th> 
       <th>Team Count</th> 
       <th>Courts</th> 
       <th>Format</th> 
       <th>Manage League</th> 
       <th>Add Players</th> 
       <th>Archive</th> 
      </tr> 
      <tr ng-repeat="league in leagues"> 
       <td>{{league.league_name}}</td> 
       <td>{{league.park_location}}</td> 
       <td>{{league.start_date | date:'dd-MM'}}</td> 
       <td>{{league.league_duration}}</td> 
       <td>{{league.team_count}}</td> 
       <td>{{league.court_ct}}</td> 
       <td>{{league.player_count}}</td> 
       <td><a class="btn btn-success">Manage</a></td> 
       <!-- This currently only logs that player and team count--> 
       <td><button class="btn btn-success" ng-click="createTeam(league.id,league.team_count,league.format)">Add</button></td> 
       <!-- //--> 
       <td><button class="btn btn-danger" ng-click="archiveLeague(league.id)">Archive</button></td> 
      </tr> 
     </table> 
    </div> 
</div> 

teams.html

<div class="container"> 
    <h1>Create Teams</h1> 
    <h3>{{current-id}}</h3> 
    <h3>{{current-teams}}</h3> 
    <h3>{{current-format}}</h3> 
    <h3>Done</h3> 
</div> 

public/javascripts/app.js

/** 
* Created by nhyland on 7/16/15. 
*/ 
var myApp = angular.module('myApp', ['ngRoute']); 

myApp.config(function ($routeProvider) { 

    $routeProvider 
     .when('/', { 
      templateUrl: "/pages/main.html", 
      controller: 'mainController', 
      map: 'main' 
     }) 
     .when('/leagues', { 
      templateUrl: "/pages/leagues.html", 
      controller: 'mainController', 
      map: 'leagues' 
     }) 
     .when('/create', { 
      templateUrl: "/pages/create.html", 
      controller: 'mainController', 
      map: 'create' 
     }) 
     .when('/create/team', { 
      templateUrl: "/pages/teams.html", 
      controller: 'mainController', 
      map: 'teams' 
     }) 
     .otherwise({ 
      template: "<h1>Page does not exist.</h1>" 
     }); 
}); 

myApp.controller('mainController', function($scope, $http, $location) { 
    $scope.test = "Angular is working"; 
    $scope.createLeague = function() { 
     $scope.league.archived = 0; 
     $http.post('/app/create/league', $scope.league) 
      .success(function(data) { 
       console.log(data); 
       $scope.leagueInfo = data; 
       $scope.leagues = {}; 
       $location.path("/leagues"); 
      }) 
      .error(function(error) { 
       console.log('Error: ' + error); 
      }); 
    }; 

    function getLeagues() { 
     $http.get('/app/leagues/director/' + director) 
      .success(function(data) { 
       console.log(data); 
       $scope.leagues = data; 
      }) 
      .error(function(error) { 
       console.log(error); 
      }) 
    } 

    getLeagues(); 

    $scope.createTeam = function(id, teams, format) { 
     console.log('League Details: ' + id); 
     console.log('League Details: ' + teams); 
     console.log('League Details: ' + format); 

     $scope.currentId = id; 
     $scope.currentTeams = teams; 
     $scope.currentFormat = format; 

     $location.path('/create/team'); 

     $scope.getNum = function(num) { 
      return new Array(num); 
     }; 
    }; 

    $scope.archiveLeague = function(id) { 
     $http.put('/app/leagues/archive/' + id + '/' + director) 
      .success(function(data) { 
       console.log(data); 
       $scope.leagues = data; 
      }) 
      .error(function(error) { 
       console.log(error); 
      }) 
    }; 
}); 

Answer 1

它不起作用，因为每次路由更改时都会创建一个新的控制器实例。这意味着您的范围将被重新初始化，因此您将失去想要保存的价值。要看到这一点，只需在浏览器中检查元素，并在控制器的开始处放置一个断点即可。您会看到当您的视图更改时会创建一个新实例。 （您的$范围将改变）

建议每个视图只有一个控制器，并且当您希望跨控制器共享数据时使用服务或工厂。