Question

使用Codeigniter和AngularJS加载不同的模板时遇到奇怪的问题。当我点击其他链接时，模板会在某些/未定义的链接上重定向。让我告诉你我的代码。

这是我的app.js

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 index.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>

home.html的

<div class="section">
    <div class="container">
        <h2>Latest added</h2>
        <div class="row">
            <div class="col-md-3 col-sm-6" ng-repeat="p in products track by $index">
                <div class="portfolio-item">
                    <div class="portfolio-image">
                        <a href="page-portfolio-item.html"><img src="#" alt="#"></a>
                    </div>
                    <div class="portfolio-info">
                        <ul>
                            <li class="portfolio-project-name">{{p.name}}</li>
                            <li>{{p.description | limitTo:100}}<span ng-if="p.description.length > 100 ">...</span></li>
                            <li class="read-more"><a href="page-portfolio-item.html" class="btn">Read more</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Contact.html

<div class="section section-breadcrumbs">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h1>Contact Us</h1>
            </div>
        </div>
    </div>
</div>

<div class="section">
    <div class="container">
        <div class="row">
        <!-- contact content -->
        </div>
    </div>
</div>

主menu.js

var mainMenu = (function() {

    var $listItems = $( '#mainmenu > ul > li' ),
        $menuItems = $listItems.children( 'a' ),
        $body = $( 'body' ),
        current = -1;
    function init() {
        $menuItems.on( 'click', open );
        $listItems.on( 'click', function( event ) { event.stopPropagation(); } );
    }
    function open( event ) {
        var $item = $( event.currentTarget ).parent( 'li.has-submenu' ),
            idx = $item.index();
        if($item.length != 0){
            if( current !== -1 ) {
                $listItems.eq( current ).removeClass( 'mainmenu-open' );
            }
            if( current === idx ) {
                $item.removeClass( 'mainmenu-open' );
                current = -1;
            }
            else {
                $item.addClass( 'mainmenu-open' );
                current = idx;
                $body.off( 'click' ).on( 'click', close );
            }
            return false;
        }
        else window.location = $item.find('a').attr('href');
    }
    function close( event ) {
        $listItems.eq( current ).removeClass( 'mainmenu-open' );
        current = -1;
    }
    return { init : init };
})();

那么会发生什么。
我可以通过链接www.mypage.com/#/访问我的home_page（www.mypage.com）和页面呈现。
然后我点击菜单中的说出联系人按钮，我被重定向到提供404站点的http://mypage.com/undefined 如果我在浏览器上按下按钮，我将被重定向到www.mypage.com/#/contact并正确呈现页面

nginx.logs

==> /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"

在图片中说明：

第一步打开主页

第二步点击按钮联系人

第三步按下按钮后

第四步点击另一个按钮，如家

怎么了？

如果您需要任何其他信息，请告诉我，我会提供。提前谢谢

Answer 1

我怀疑你的问题是主菜单.js。

...
else window.location = $item.find('a').attr('href');
...

您的联系人＆＃39;链接：

<li>
    <a ng-href="#/contact">Contact</a>
</li>

a没有href属性，所以它会这样做：

window.location = 'undefined';

尝试将href="#/contact"添加到“联系人”链接。

我认为当你按下＆＃39;后退时，Angular会自动引导客户端。按钮，这就是为什么当你按下＆＃39;回复＆＃39;再次。

TLDR; 将<a ng-href="#/contact">Contact</a>更改为<a ng-href="#/contact" href="#/contact">Contact</a>。

Answer 2

如果您的指定代码是正确的，那么您必须更改此

controllers.contactCtrl = function($scope, $http, $location) {
/// your code as you have used three service $scope, $http, $location components 
}

使用AngularJS奇怪链接到/ undefined

2 个答案: