2

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);
            })
    };
});

1 Answer 1

2

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.

Sign up to request clarification or add additional context in comments.

1 Comment

Thank you! I'll do that. 😀

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.