Javascript 奇怪的链接到/未定义AngularJS
当使用Codeigniter和AngularJS加载不同的模板时,我遇到了一个奇怪的问题。当我点击其他链接时,模板在一些/未定义的链接上被重定向。让我给你看看我的代码 这是我的app.jsJavascript 奇怪的链接到/未定义AngularJS,javascript,angularjs,Javascript,Angularjs,当使用Codeigniter和AngularJS加载不同的模板时,我遇到了一个奇怪的问题。当我点击其他链接时,模板在一些/未定义的链接上被重定向。让我给你看看我的代码 这是我的app.js var app = angular.module('app', ['ngRoute']); app.config(function($routeProvider){ $routeProvider. when('/', {controller:'homeCtrl', templateUrl:
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider.
when('/', {controller:'homeCtrl', templateUrl:'app/templates/home.html'}).
when('/home', {controller:'homeCtrl', templateUrl:'app/templates/home.html'}).
when('/contact', {controller:'contactCtrl', templateUrl:'app/templates/contact.html'}).
otherwise({ redirectTo: '/home'});
});
controllers.js
var app = angular.module('app');
var controllers = {};
controllers.headerCtrl = function($scope, categoriesFactory){
//get available categories
categoriesFactory.getCategoriesList().success(function(data){
$scope.categories = data;
}).error(function(e){
console.log(e);
});
}
controllers.homeCtrl = function($scope, productsFactory){
productsFactory.getlatestProductsList(16).success(function(data){
$scope.products = data;
}).error(function(e){
console.log(e);
});
}
controllers.contactCtrl = function($scope, $http, $location){
//Send message
// creating a blank object to hold our form information.
//$scope will allow this to pass between controller and view
$scope.formData = {};
// submission message doesn't show when page loads
$scope.submission = false;
// Updated code thanks to Yotam
var param = function(data) {
var returnString = '';
for (d in data){
if (data.hasOwnProperty(d))
returnString += d + '=' + data[d] + '&';
}
// Remove last ampersand and return
return returnString.slice( 0, returnString.length - 1 );
};
$scope.submitForm = function(){
$scope.submissionMessage = '';
$http({
method : 'POST',
url : $location.protocol() + '://' + $location.host() + '/server/contact/send_message',
data : param($scope.formData), // pass in data as strings
// set the headers so angular passing info as form data (not request payload)
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
}).success(function(data){
if(!data.success){
var name = document.getElementById('Name').value;
var email = document.getElementById('email').value;
var subject = document.getElementById('subject').value;
var message = document.getElementById('message').value;
if(name.length == '' && email.length == '' && subject.length == '' && message.length == ''){
$scope.submissionMessage = data.messageError;
}
// if not successful, bind errors to error variables
$scope.errorName = data.errors.name;
$scope.errorEmail = data.errors.email;
$scope.errorSubject = data.errors.subject;
$scope.errorTextarea = data.errors.message;
$scope.submission = true; //shows the error message
}else{
// if successful, bind success message to message
$scope.submissionMessage = data.messageSuccess;
$scope.formData = {}; // form fields are emptied with this line
$scope.submission = true; //shows the success message
$scope.errorName = '';
$scope.errorEmail = '';
$scope.errorSubject = '';
$scope.errorTextarea = '';
}
});
};
}
app.controller(controllers);
Factorys.js
var app = angular.module('app');
//Factory for categories
app.factory('categoriesFactory', ['$http', '$location', function($http, $location){
var factory = {};
factory.getCategoriesList = function(){
return $http.get($location.protocol() + '://' + $location.host() + '/server/api/categories');
}
return factory;
}]);
//Factory for products
app.factory('productsFactory', ['$http', '$location', function($http, $location){
var factory = {};
/*
factory.getProductsList = function(){
return $http.get($location.protocol() + '://' + $location.host() + '/server/api/products');
}
*/
factory.getlatestProductsList = function($n){
return $http.get($location.protocol() + '://' + $location.host() + '/server/api/products/latest/'+$n);
}
return factory;
}]);
我的HTML索引.HTML
<!DOCTYPE html>
<html ng-app="app">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Trade inside europe</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/icomoon-social.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/leaflet.ie.css" />
<![endif]-->
<link rel="stylesheet" href="css/main.css" />
<script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body>
<!-- Navigation & Logo-->
<div class="mainmenu-wrapper" ng-controller="headerCtrl">
<div class="container">
<nav id="mainmenu" class="mainmenu">
<ul>
<li class="logo-wrapper"><a ng-href="#/home" target="_self"><img src="img/mPurpose-logo.png" alt="Multipurpose Twitter Bootstrap Template"></a></li>
<li class="active">
<a ng-href="#/home" target="_self">Home</a>
</li>
<li class="has-submenu">
<a href="#">Trade +</a>
<div class="mainmenu-submenu">
<div class="mainmenu-submenu-inner">
<div ng-repeat="c in categories track by $index">
<h4 ng-if="c.parent == 0">{{c.category}}</h4>
<ul ng-repeat="sub_c in categories track by $index">
<li ng-if="sub_c.parent == c.id_category">
<a href="#">{{sub_c.category}}</a>
</li>
</ul>
</div>
</div><!-- /mainmenu-submenu-inner -->
</div><!-- /mainmenu-submenu -->
</li>
<li>
<a ng-href="#/contact">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
<div ng-view></div>
<!-- Footer -->
<div class="footer">
<!-- Footer content -->
</div>
</div>
<!-- Javascripts -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>window.jQuery || document.write('<script src="http://code.jquery.com/jquery-2.1.4.min.js"><\/script>')</script>
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/jquery.sequence-min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script src="js/main-menu.js"></script>
<script src="js/template.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-resource.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers.js"></script>
<script src="app/factorys.js"></script>
</body>
</html>
那么会发生什么呢。我进入我的主页(www.mypage.com),并通过链接www.mypage.com/#/,正确呈现页面
然后单击菜单中的“让我说联系”按钮,我会被重定向到提供404站点的站点。
若我按下浏览器上的“后退”按钮,我将被重定向到www.mypage.com/#/contact,页面将正确呈现 nginx.log
==> /var/log/nginx/error.log <==
2016/01/06 12:24:46 [error] 11852#0: *142 open() "/var/www/html/testapp.com/public_html/undefined" failed (2: No such file or directory), client: 127.0.0.1, server: testapp.com, request: "GET /undefined HTTP/1.1", host: "testapp.com", referrer: "http://testapp.com/"
==> /var/log/nginx/access.log <==
127.0.0.1 - - [06/Jan/2016:12:24:46 +0100] "GET /undefined HTTP/1.1" 404 200 "http://testapp.com/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36"
==>/var/log/nginx/error.log/var/log/nginx/access.log如果给定的代码正确,则必须更改此代码
controllers.contactCtrl = function($scope, $http, $location) {
/// your code as you have used three service $scope, $http, $location components
}
我怀疑你的问题是main-menu.js
...
else window.location = $item.find('a').attr('href');
...
您的“联系人”链接:
<li>
<a ng-href="#/contact">Contact</a>
</li>
尝试将href=“#/contact”
添加到您的联系人链接
我认为当您按下“后退”按钮时,Angular是在客户端引导的,这就是为什么当您再次按下“后退”按钮时,该行为不会发生的原因
TLDR将
更改为
您的帖子缺少联系人控制器的代码。请提供路线和控制器代码。我已添加了contactCtrl,路线数据可在app.js中找到。您所说的“客户端通过javascript取消定义”是什么意思???你不想要哪个控制器???我相信这个问题与codeigniter无关,因为我目前尝试使用的都是html和angular。。。如果我抛出codeigniter和所有控制器对codeigniter的请求,问题仍然是相同的What'smain menu.js
?是否存在设置单击处理程序以执行重定向的内容?直觉告诉我们,问题将不在您向我们展示的代码范围内……我没有这些行,因为为了调试目的,我对控制器的全部内容进行了注释。在取消注释整个控制器后添加的行,以便我可以将其粘贴到堆栈溢出上。所以这不是问题。谢谢你的努力。我相信你已经接近解决方案了。您的代码对我不起作用,但我已尝试更改网页上的一些其他元素,这些元素不在菜单中,重定向正常工作。是的,问题出在main-menu.js中。我只需要解决方案如何破解它,这样它就能正常工作。我也尝试过只使用href属性的标记,但问题仍然存在。如果我删除整行else window.location=$item.find('a')。attr('href');既然angular正在管理链接槽页面?乍一看,它似乎起作用了?你看到什么问题了吗?@Valor那应该没问题。如果您使用angular管理所有路由,并且您有一个单页应用程序,那么ng href
就足够了。我做了一些测试,不明白为什么添加href=“#contact”
不起作用。。。但是,如果移除线路似乎没有破坏任何东西,我会带着它跑!我得等22小时才能给你赏金,明天你就能拿到了。再次感谢你!
controllers.contactCtrl = function($scope, $http, $location) {
/// your code as you have used three service $scope, $http, $location components
}
...
else window.location = $item.find('a').attr('href');
...
<li>
<a ng-href="#/contact">Contact</a>
</li>
window.location = 'undefined';