Angularjs路由：TypeError：无法读取未定义的属性“路径”答案

【问题标题】：Angularjs routing: TypeError: Cannot read property 'path' of undefinedAngularjs路由：TypeError：无法读取未定义的属性“路径”
【发布时间】：2015-05-25 14:54:51
【问题描述】：

我是 AngularJS 的新手。有人可以帮我为什么以下路由不起作用？我有一个提交用户表单的自定义指令。提交后，应该导航到成功页面。（views/success.html）。

我在提交时遇到错误。类型错误：无法读取属性未定义的“路径”

如果我只是尝试导航到地址栏上的“/index.html#/success”，它不会重定向到成功页面，所以我怀疑这是一个路由问题，但我似乎无法理解它的原因。任何帮助将不胜感激！

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>

【问题讨论】：

标签： angularjs angularjs-directive angularjs-routing

【解决方案1】：

$location需要在指令定义中注入，而不是在链接中函数，例如

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

另外你不需要为控制器、指令等使用单独的模块。换句话说，只需要一个angular.module('...')调用

您的整个代码可以简化为

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

【讨论】：

谢谢，但我收到“错误：$injector:modulerr 模块错误”。我环顾四周很多次。即使不使用自定义指令，路由似乎也不起作用。你能告诉我它缺少什么吗？
我编辑了原始代码。其中有更多错误需要纠正。
谢谢！！我会测试一下！！
@topCodeGirl 这个答案解决了您的问题吗？您可能想通过接受它来让其他人知道。