CODEWITHSUNDEEP
javascriptangularjs
Tomek Buszewski
Tomek Buszewski

Reputation: 7935

AngularJS doesn't enter controller

I'm learning Angular with its official tutorial (step 8 at the moment). My problem is, when I have the list:

<ul class="phones">
    <li ng-repeat="phone in phones | filter: query | orderBy: orderProp">
        <a href="#/phones/{{phone.id}}"><span>{{phone.name}}</span></a>
    </li>
</ul>

And I click on one of those elements, nothing happens (except from url being changed, but that seems normal, because it hash # before).

My js is:

app.js:

var phonecatApp = angular.module('phonecatApp', [
    'ngRoute',
    'phonecatControllers'
]);

phonecatApp.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/phones', {
                templateUrl: 'phone-list.html',
                controller: 'PhoneListCtrl'
            }).
            when('/phones/:phoneId', {
                templateUrl: 'phone-detail.html',
                controller: 'PhoneDetailCtrl'
            }).
            otherwise({
                redirectTo: '/phones'
            });
    }]);

controller.js:

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

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
    function ($scope, $http) {
        $http.get('js/phones.json').success(function(data) {
            $scope.phones = data;
        });

        $scope.orderProp = 'name';
    }]);

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http',
    function($scope, $routeParams, $http) {
        alert($routeParams);
        $http.get('app/phones/' + $routeParams.phoneId + '.json').success(function(data) {
            console.log(data)
            $scope.phone = data;
        });
    }]);

What can I do? I even tried to copy the tutorial source for both js files, but this didn't help. Actually, nothing from PhoneDetailCtrl gets fired, neither alert nor console.log, not to mention get.

Upvotes: 0

Views: 419

Answers (1)

Omri Aharon
Omri Aharon

Reputation: 17064

You're missing the declaration of the controller(s) in the HTML, simply add whichever you need: (get function is under PhoneDetailCtrl/phones list is under PhoneListCtrl)

<ul class="phones" ng-controller="PhoneDetailCtrl">
    <li ng-repeat="phone in phones | filter: query | orderBy: orderProp">
        <a href="#/phones/{{phone.id}}"><span>{{phone.name}}</span></a>
    </li>
</ul>

Note that the element that you're declaring the controller on, in this case the ul, creates a scope where you can access the controller's scope variables and functions. So anywhere outside the ul will be "blind" to the PhoneDetailCtrl controller.

Upvotes: 1

Related Questions