Angularjs routing: TypeError: Cannot read property 'path' of undefined

Question

I'm new to AngularJS. Can someone help me why the following routing will not work? I have a custom directive that submits a user form. After submission, it should navigate to the success page.(views/success.html).

I'm getting an error upon submission. TypeError: Cannot read property 'path' of undefined

If I simply try navigate to "/index.html#/success" on the address bar, it will not redirect to the success page, so I'm suspecting it is a routing issue but I can't seem to understand the cause of it. Any help would be greatly appreciated!

var myApp = angular.module('myApp', ['ngRoute', 'myControllers', 'loginDirective'])
    .config(function ($routeProvider) {
        $routeProvider.when("/home", {
                 templateUrl: 'index.html',
                 controller: 'myApp'
            }).when("/success", {
                templateUrl: 'views/success.html',
                controller: 'myApp'
            })
            // If no route is selected then use the 'home' route.
            .otherwise({ redirectTo: '/home' });


    });

// Directive - Modifies HTML behaviour.
var myDirectives = (function () {
    var myDirectives = angular.module('loginDirective', []);

    // directive() is a factory method to create directives.
    myDirectives.directive('login', function () {
        return {
            restrict: 'A',
            scope: {
            },
            link: function ($scope, elem, attrs, ctrl, $location) {
                $scope.submit = function() {
                    console.log("I clicked on submit");
                    $location.path("/success");
                }
            },
            templateUrl: function (element, attr) { return 'views/loginForm.html' },
        }
    });
    return myDirectives;
}());

// Controller - dispatches inputs and outputs.
var myControllers = (function () {
    var myControllers = angular.module('myControllers', []);

    // Controllers are defined by the controller function.
    myControllers.controller('AppCtrl', ['$scope', '$routeParams','$location', function ($scope, $routeParams, $location) {
        $scope.title = "Sign in";
    }]);
    return myControllers;
}());

index.html

<!DOCTYPE html>
<html>
<body ng-app='myApp' ng-controller="AppCtrl" class="container">

<div login></div> //custom directive

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="js/app.js"></script>

</body>
</html>

gaiazov · Accepted Answer · 2015-03-23 19:10:40Z

4

$location needs to be injected in the directive definition, not in the link function, e.g.

// directive() is a factory method to create directives.
myDirectives.directive('login', ['$location', function ($location) {
    ...
}]);

Also you don't need to use a separate module for controllers, directive, etc. In other words, there only needs to be one angular.module('...') call

Your whole code can be simplified as

// define the app
var app = angular.module('myApp', ['ngRoute']);

// app configuration block
app.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.when("/home", {
                 templateUrl: 'index.html',
                 controller: 'myApp'
            }).when("/success", {
                templateUrl: 'views/success.html',
                controller: 'myApp'
            })
            // If no route is selected then use the 'home' route.
            .otherwise({ redirectTo: '/home' });
    }]);

// definition block for 'AppCtrl' controller
app.controller('AppCtrl', ['$scope',
    function ($scope) {
        $scope.title = "Sign in";
    }]);

// definition for 'login' directive
app.directive('login', ['$location',
    function ($location) {
        return {
            restrict: 'A',
            scope: {
            },
            link: function (scope, element, attrs) {
                scope.submit = function() {
                    console.log("I clicked on submit");
                    $location.path("/success");
                }
            },
            templateUrl: 'views/loginForm.html'
        }
    }]);

edited Mar 23, 2015 at 19:10

answered Mar 22, 2015 at 15:48

gaiazov

1,96014 silver badges26 bronze badges

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

3 Comments

leannez Over a year ago

Thanks, but I got an "Error: $injector:modulerr Module Error". I look around many times. The routing doesn't seem to work even without using a custom directive. Can you please tell me what it was missing?

gaiazov Over a year ago

I edited the original code. There were more mistakes in it that needed to be corrected.

Konrad Viltersten Over a year ago

@topCodeGirl Did this answer resolve your issue? You might want to let others know by accepting it.

Collectives™ on Stack Overflow

Angularjs routing: TypeError: Cannot read property 'path' of undefined

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related