All variables in $scope undefined in Angular.js

Question

I have a very simple website which uses Angular.js to display its content. I started learning it 2 days ago, and following the official tutorial gave no issues at all.

This is my js file:

var Site = angular.module('Website', []);

Site.config(function ($routeProvider) {
  $routeProvider
    .when('/home',  {templateUrl: 'parts/home.html', controller: 'RouteController'})  
    .when('/who',   {templateUrl: 'parts/who.html', controller: 'RouteController'})
    .when('/what',  {templateUrl: 'parts/what.html', controller: 'RouteController'})
    .when('/where', {templateUrl: 'parts/where.html', controller: 'RouteController'})
    .otherwise({redirectTo: '/home'});
});

function AppController ($scope, $rootScope, $http) {
    // Set the slug for menu active class
    $scope.$on('routeLoaded', function (event, args) {
        console.log(args);
        $scope.slug = args.slug;
    });
}

function RouteController ($scope, $rootScope, $routeParams) {
    // Getting the slug from $routeParams
   var slug = $routeParams.slug; 
   var pages = {
      "home": {
        "title": "Samuele Mattiuzzo",
      },

      "who": {
        "title": "All you'll get, won't blog"
      },

      "what": {
       "title": "Shenanigans about this website"
      },

      "where": {
        "title": "Where can you find me on the net?"
      }
    };
    $scope.$emit('routeLoaded', {slug: slug});
    $scope.page = pages[slug];
}

As you can see, it's very simple, it just need to return a page title based on the page slug. In the template (where I load my app with <body ng-controller="AppController">), inside the <ng-view> directive I have one of those partial templates loaded (which is currently working and displaying static content) but I cannot see the content of {{page.title}}.

I have Batarang enabled on my browser and I'm testing my website with web-server.js, but I've read that Batarang has some issues with variables and scopes and always returns undefined, so that's why I added that console.log statement. Doesn't matter what I try to print (args, slug or page, obviously in different parts of the js), it's always undefined.

What am I exactly doing wrong here? Thanks all

updated, it's just a listener for now. When this works, it will serve the purpose of loading the json where i'm moving my page titles — Samuele Mattiuzzo
– Samuele Mattiuzzo, Commented Apr 15, 2013 at 13:20
The problem with your code is that you are using $routeparams.slug but you have not defined the same in the route if you want to use $routeprams.slug then you should modify your route to "/home/:slug" — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Apr 15, 2013 at 13:49
isn't "home" my slug already? That's what I was expecting, at least... Will provide fiddle asap, thanks! — Samuele Mattiuzzo
– Samuele Mattiuzzo, Commented Apr 15, 2013 at 13:50

nathasm · Accepted Answer · 2013-04-15 13:21:57Z

2

None of your controllers are being associated with your "Site".

I believe if you change your free functions to be associated with Site this should get you on the right track. Also, you can simplify your code slightly since the information you're looking for is contained in the $location and not $routeParams.

Site.controller("RouteController", function($scope, $location) {
var slug = $location.path(); 
var pages = {
  "/home": {
    "title": "Samuele Mattiuzzo",
  },

  "/who": {
    "title": "All you'll get, won't blog"
  },

  "/what": {
   "title": "Shenanigans about this website"
  },

  "/where": {
    "title": "Where can you find me on the net?"
  }
};
$scope.page = pages[slug];
});

Additionally, in your AppController you can watch for $routeChangeSuccess instead of notifying on a location change from your RouteController:

Site.controller("AppController", function($rootScope) {
  $rootScope.$on("$routeChangeSuccess", function() { \\do something }
});

answered Apr 15, 2013 at 13:21

nathasm

2,5745 gold badges25 silver badges36 bronze badges

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

1 Comment

Ajay Singh Beniwal Over a year ago

its not mandatory to add controllers to module they can be registered globally

Collectives™ on Stack Overflow

All variables in $scope undefined in Angular.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related