Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

I've got an AngularJS app that has (for now) just one controller but multiple views. All of this data is pulled via $http.

In one view, it's got an ng-repeat for 'leagues'. It's got a button that has an ng-click to take the amount of teams for that league and the amount of players per team and pass them to a function and set them as variables. That function also redirects the view to another page with $location.

In that page, it's got binds to look at those variables. However, nothing shows. It can LOG the information but it won't show it when the view changes.

Here's my git repo for it.

  1. leagues.html, line 27 for the ng-click that calls the function in list item 3, below, and to send to teams.html.
  2. teams.html, to show the variables (for testing, I was just trying to display them before creating another ng-repeat)
  3. public/javascripts/app.js, line 63 for the function to render the variables.

Most of the answers for this tend to say "use different views" or "use ui-router". Why doesn't this work?

Please see my code snippets below.

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);
            })
    };
});
share|improve this question

It does not work because every time the route change, a new controller instance is created. This means that your scope is reinitialized and you therefore lose the value you wanted to save. To see this, simply inspect element in your browser and put a break point at the begining of your controller. You will see that a new instance is created when your view changes. (your $scope will change)

It is recomended to have only one controller per view and use services or factories when you want to share data across controllers.

share|improve this answer
    
Thank you! I'll do that. 😀 – Nathan Hyland Jul 21 '15 at 0:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.