Подтвердить что ты не робот

Странное соединение с /undefined с AngularJS

У меня странная проблема при загрузке разных шаблонов с помощью Codeigniter и AngularJS. Когда я нажимаю на другую ссылку, шаблоны перенаправляются по какой-либо/ undefined ссылке. Позвольте мне показать вам мой код.

Это мой 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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'; return false;">
        <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), и страница правильно отображается со ссылкой www.mypage.com/#/.
Затем я нажимаю кнопку let say contact в меню, и я перенаправляюсь на http://mypage.com/undefined, который предоставляет 404 сайта.
Если я нажму кнопку обратно в браузере, я буду перенаправлен на 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"

Объяснение в изображениях:

Первый шаг с открытием главной страницы
Первый шаг, открывающий домашнюю страницу

Второй шаг, нажав на кнопку контакта
Второй шаг, нажимая на контакт кнопки

Третий шаг, нажатие кнопки назад
введите описание изображения здесь

Четвертый шаг, нажатие другой кнопки, как дома
главное меню отсутствует

Что происходит?

Если вам нужна дополнительная информация, пожалуйста, дайте мне знать, и я предоставлю. Заранее благодарю

4b9b3361

Ответ 1

Я подозреваю, что ваша проблема - main-menu.js.

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

Ссылка "Контакт":

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

a не имеет свойства href, поэтому он сделает следующее:

window.location = 'undefined';

Попробуйте добавить href="#/contact" к вашей ссылке для контакта.

Я думаю, что Angular загружается на стороне клиента, когда вы нажимаете кнопку "назад", поэтому поведение не происходит, когда вы снова нажимаете "назад".

TL;DR; измените <a ng-href="#/contact">Contact</a> на <a ng-href="#/contact" href="#/contact">Contact</a>.

Ответ 2

Если ваш данный код верен, вам нужно изменить этот

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