angularJS：UI路由器$ state.go只適用於第一次點擊

Question

我想學習如何使用AngularJS和我偶然發現了我解決不了問題......下面

代碼應該： - show 2 views：1在左側顯示一些名稱（「接收者」），一個顯示主要內容（相應人員的簡介或列表（「currentReceiver」）） - 通過$ state.go導航到相應的「願望清單」，並將網址更改爲「... /＃/ wishlist /」

我的代碼似乎只在第一次點擊名稱時才起作用......點擊後一旦網址保持空白（'... /＃/'），並且顯示介紹頁面...

有人可以解釋我做錯了什麼或我應該看看調試這個問題......？

部分我的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 （與我在$ state.go中提到的狀態相關的.js）

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