我是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>
答案 0 :(得分:4)
$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'
}
}]);