Question

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

提取的

在一个视图中，它为{＆＃39;联盟提供了ng-repeat。它有一个ng-click按钮，可以获得该联盟的团队数量和每个团队的玩家数量，并将它们传递给一个函数并将它们设置为变量。该功能还将视图重定向到$location的另一个页面。

在那个页面中，它有了绑定来查看这些变量。然而，没有任何表现。它可以LOG信息，但在视图更改时不会显示。

这是我的git repo。

leagues.html，第27行，用于调用下面列表项3中的函数的ng-click，并发送到teams.html。
teams.html，显示变量（用于测试，我只是在创建另一个ng-repeat之前尝试显示它们）
public/javascripts/app.js，第63行，用于呈现变量的函数。

大多数答案都倾向于说＆＃34;使用不同的观点＆＃34;或者＆＃34;使用ui-router＆＃34;。为什么这不起作用？

请参阅下面的我的代码段。

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

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

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

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

1 个答案: