angularJS: UI-маршрутизатор $ state.go работает только на первый щелчок

Question

Я пытаюсь научиться использовать AngularJS и я наткнулся на проблемы, я не могу решить ...

ниже код должен: - показать 2 просмотров: 1, чтобы показать некоторые имена («получатели») слева и один, чтобы показать основное содержание (ввод или список для соответствующего лица («currentReceiver»)) - перейти через $ state.go к соответствующему «списку пожеланий» и изменению URL-адреса на «.../#/wishlist /»

Код, который я, похоже, работает только, когда я нажимаю на имя в первый раз ... Как только я нажал один раз URL остается пустым («.../#/'), и отображается страница ввода ...

Может кто-нибудь объяснить мне, что я делаю неправильно или где я должен искать, чтобы отладить эту проблему ...?

Часть моей index.html

<div class="container-fluid"> 
     <div class="row"> 
      <div class="col-sm-3 col-md-2 sidebar" ui-view="wishlists"> 
      </div> 
      <div class="col-sm-20 col-sm-offset-3 col-md-10 col-md-offset-2 main" ui-view="wishes"> 
      </div> 
     </div> 
    </div> 

    <!-- scripts --> 
    ...  

</body> 

wishlist.tmpl.html (шаблон вида 'список желаний' на левой стороне желания ссылки functon "setCurrentReceiver")

<ul class="nav nav-sidebar"> 
    <li ng-repeat="receiver in receivers" ng-class="{'active': isCurrentReceiver(receiver)}"> 
     <a href="#" ng-click="setCurrentReceiver(receiver)">{{receiver.name}}</a> 
    </li> 
</ul> 

gimmi-app.js (with $ state.go in functi на setCurrentReceiver)

angular.module('Gimmi', [ 
    'ui.router', 
    'wishlist', 
    'wishlist.wish', 
    'wishlist.receiver' 
]) 
.config(function($stateProvider, $urlRouterProvider){ 
    $stateProvider 
     .state('gimmi', { 
      url: '', 
      abstract: true 
     }) 
    ; 
    $urlRouterProvider.otherwise('/'); 
}) 

.controller('MainCtrl', function ($scope, $state) { 
    //-------------------------------------------------- 
    // RECEIVER MODULE 
    //-------------------------------------------------- 

    $scope.receivers = [ 
     {"id": 1, "name": "XXX", "age": 31, "gender": "m"}, 
     {"id": 2, "name": "YYY", "age": 28, "gender": "v"}, 
     {"id": 3, "name": "ZZZ", "age": 59, "gender": "v"}, 
    ]; 

    $scope.currentReceiver = null; 

    function setCurrentReceiver(receiver) { 
     $scope.currentReceiver = receiver; 

     $state.go('gimmi.wishlist.wish', {receiverName: receiver.name}); 

     cancelEditing(); 
     cancelCreating(); 
    } 

    function isCurrentReceiver(receiver) { 
     return $scope.currentReceiver !== null && receiver.id === $scope.currentReceiver.id; 
    } 

    $scope.setCurrentReceiver = setCurrentReceiver; 
    $scope.isCurrentReceiver = isCurrentReceiver; 

    //-------------------------------------------------- 
    // WISHLIST MODULE 
    //-------------------------------------------------- 

    $scope.wishes = [ 

     {"id": 1, "title": "Smartphone", "price": 250, "status": "reserved", "receiverID": 1}, 
     {"id": 2, "title": "Lamzac", "price": 75, "status": "free", "receiverID": 1}, 
     {"id": 3, "title": "Fatboy", "price": 140, "status": "free", "receiverID": 1}, 
     {"id": 4, "title": "Pioneer DJM 800", "price": 800, "status": "reserved", "receiverID": 1}, 
     {"id": 5, "title": "Snowboard", "price": 500, "status": "free", "receiverID": 2} 

    ]; 

wishlist.js (с целью показать левую часть и страницу интро, когда URL = '/')

angular.module('wishlist', [ 
    'gimmi.models.wishlist' 
]) 
    .config(function($stateProvider){ 
     $stateProvider 
      .state('gimmi.wishlist', { 
       url: '/', 
       views: { 
        'wishlists@': { 
         controller: 'wishlistCtrl', 
         templateUrl: 'app/wishlist/wishlist.tmpl.html' 
        } 
        ,'wishes@': { 
         controller: 'wishCtrl', 
         templateUrl: 'app/wishlist/intro.tmpl.html' 
        } 
       } 
      }) 
     ; 
    }) 

    .controller('wishlistCtrl', function wishlistCtrl($scope){ 

    }); 
}); 

wish.js (.js с состоянием, к которому я обращаюсь в $ state.go)

angular.module('wishlist.wish', [ 
    'gimmi.models.wishlist', 
    'gimmi.models.wish', 
    'wishlist.wish.create', 
    'wishlist.wish.edit'  
]) 
    .config(function($stateProvider){ 

     $stateProvider 
      .state('gimmi.wishlist.wish', { 
       url: 'wishlist/:receiverName', 
       views: { 
        'wishes@': { 
         templateUrl: 'app/wishlist/wish/wish.tmpl.html', 
         controller:'wishCtrl' 
        } 
       } 
      }) 
     ; 
    }) 

    .controller('wishCtrl', function($scope, $stateParams) { 
     $scope.currentReceiverName = $stateParams.receiverName; 
    }) 

; 

Answer 1

попытайтесь удалить href="#" по вашей ссылке