我是 AngularJS 的新手。有人可以帮助我为什么以下路由不起作用？我有一个提交用户表单的自定义指令。提交后，它应该导航到成功页面。(views/success.html)。
I'm getting an error upon submission. TypeError: Cannot read property 'path' of undefined
如果我只是尝试导航到地址栏上的“/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>
最佳答案
$location 需要在指令定义中注入(inject)，而不是在链接中
功能，例如
// directive() is a factory method to create directives.
myDirectives.directive('login', ['$location', function ($location) {
...
}]);
此外，您不需要为 Controller 、指令等使用单独的模块。换句话说，只需要一个 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 路由 : TypeError: Cannot read property 'path' of undefined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29196330/