Angularjs路由：类型错误：无法读取的未定义的属性“路径” [英] Angularjs routing: TypeError: Cannot read property 'path' of undefined
问题描述
我是新来AngularJS。有人能帮助我，为什么下面的路由将无法正常工作？我有一个提交表单的用户自定义指令。提交后，它应该导航到成功页面。（浏览量/ success.html）。
我得到在提交错误。类型错误：无法读取属性
未定义的路径如果我只是尝试导航地址栏上的/index.html#/success，它不会重定向到成功页面，所以我怀疑这是一个路由的问题，但我似乎无法理解它的原因。任何帮助将大大AP preciated！
VAR对myApp = angular.module（'对myApp'，['ngRoute'，'myControllers'，'loginDirective']）
的.config（函数（$ routeProvider）{
$ routeProvider.when（/家，{
templateUrl：'的index.html'，
控制器：对myApp
}）。当（/成功，{
templateUrl：意见/ success.html'，
控制器：对myApp
}）
//如果没有选择路径，然后使用'家'的路线。
不然的话（{redirectTo：'/家'}）;
}）;//指令 - 修改HTML行为。
VAR myDirectives =（函数（）{
VAR myDirectives = angular.module（'loginDirective'，[]）; //指令（）是一个工厂方法来创建指令。
myDirectives.directive（'登陆'，函数（）{
返回{
限制：'A'，
范围： {
}，
链接：功能（$范围，ELEM，ATTRS，CTRL $位置）{
$ scope.submit =功能（）{
的console.log（我点击提交）;
$ location.path（/成功）;
}
}，
templateUrl：功能（元素，属性）{回报的观点/ loginForm.html}，
}
}）;
返回myDirectives;
}（））;//控制器 - 调度输入和输出。
VAR myControllers =（函数（）{
VAR myControllers = angular.module（'myControllers'，[]）; //控制器被控制器功能限定。
myControllers.controller（'AppCtrl'，['$范围，$ routeParams'，'$位置'，函数（$范围，$ routeParams，$位置）{
$ scope.title =登录;
}]）;
返回myControllers;
}（））;index.html的
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT;机身NG-应用='对myApp'NG控制器=AppCtrl级=容器＆GT;＆LT; DIV登录与GT;＆LT; / DIV＆GT; //自定义指令＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =JS / app.js＆GT;＆LT; / SCRIPT＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
$位置需要在指令定义中注入，而不是在链接
功能，例如//指令（）是一个工厂方法来创建指令。
myDirectives.directive（'登陆'，['$位置'，函数（$位置）{
...
}]）;另外不需要使用单独的模块控制器，指令等。换句话说，仅需要有一个
angular.module（'...'）呼叫您整个code可以简化为
//定义应用程序
VAR应用= angular.module（'对myApp'，['ngRoute']）;//应用程序配置块
的app.config（['$ routeProvider'，
功能（$ routeProvider）{
$ routeProvider.when（/家，{
templateUrl：'的index.html'，
控制器：对myApp
}）。当（/成功，{
templateUrl：意见/ success.html'，
控制器：对myApp
}）
//如果没有选择路径，然后使用'家'的路线。
不然的话（{redirectTo：'/家'}）;
}]）;//定义块AppCtrl控制器
app.controller（'AppCtrl'，['$范围'，
功能（$范围）{
$ scope.title =登录;
}]）;//定义'登录'指令
app.directive（'登陆'，['$位置'，
功能（$位置）{
返回{
限制：'A'，
范围： {
}，
链接：功能（范围，元素，ATTRS）{
scope.submit =功能（）{
的console.log（我点击提交）;
$ location.path（/成功）;
}
}，
templateUrl：意见/ loginForm.html
}
}]）;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>
解决方案
$locationneeds 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('...')callYour 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' } }]);
这篇关于Angularjs路由：类型错误：无法读取的未定义的属性“路径”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
