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

问题

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>

回答1:

$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'
        }
    }]);

来源：https://stackoverflow.com/questions/29196330/angularjs-routing-typeerror-cannot-read-property-path-of-undefined

标签

angularjs

angularjs-directive

angularjs-routing