Question

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

提交时我收到错误。 TypeError：无法读取属性未定义的“路径”

如果我只是尝试导航到地址栏上的“/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>

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

Angularjs routing：TypeError：无法读取属性＆＃39; path＆＃39;未定义的

1 个答案: