Dziwne łączenie/nieokreślony z AngularJS

Question

Mam dziwny problem podczas ładowania różnych szablonów przy użyciu Codeigniter i AngularJS. Kiedy kliknę na inny link, szablony zostaną przekierowane na jakiś/niezdefiniowany link. Pozwól, że pokażę ci mój kod.

To jest moje 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; 
}]); 

Moje 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> 

główne-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 }; 
})(); 

Więc co się dzieje.
Przechodzę na stronę home_page (www.mypage.com), a strona wyświetla się poprawnie za pomocą linku www.mypage.com/#/.
Następnie klikam na powiedzmy przycisk kontaktu w menu i dostaję przekierowanie do http://mypage.com/undefined, który zapewnia 404 strony.
Jeśli i nacisnąć przycisk wstecz w przeglądarce i będzie przekierowany na stronę www.mypage.com/#/contact i renderuje poprawnie

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" 

wyjaśnione w obrazach:

Pierwszy krok otwierający stronę główną


Drugi etap kliknięcia przycisku kontakt


Trzeci krok naciskając przycisk wstecz


Forth krok klikając przycisk innego podobnego domu


Co się dzieje?

Jeśli potrzebujesz dodatkowych informacji, proszę dać mi znać, a ja dostarczę. góry dziękuję

Answer 1

podejrzewam problem jest główne-menu.js.

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

Twój 'contact' Link:

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

a nie posiada własności href, więc to zrobię:

window.location = 'undefined'; 

spróbuj dodać href="#/contact" do linku Kontakt.

Myślę, że Angular jest bootstrapped po stronie klienta po naciśnięciu przycisku "wstecz", dlatego zachowanie nie występuje po ponownym naciśnięciu "wstecz".

TLDR; zmiana <a ng-href="#/contact">Contact</a> na <a ng-href="#/contact" href="#/contact">Contact</a>.

Answer 2

Jeśli danego kodu jest poprawne wtedy trzeba zmienić tę

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