angularJS:ui-router $state.go 仅适用于第一次点击

Question

我正在尝试学习如何使用 AngularJS，但我偶然发现了一个我无法解决的问题...

下面的代码应该: - 显示 2 个 View :1 个用于在左侧显示一些名称(“接收者”)，一个用于显示主要内容(相应人员的介绍或列表(“currentReceiver”)) - 通过 $state.go 导航到相应的“wishlist”并将 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 (左侧 View “愿望 list ”的模板希望链接到功能“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 (在函数 setCurrentReceiver 中使用 $state.go)

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}

    ];

愿望 list .js (当 url = '/' 时显示左侧和介绍页面的 View )

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

说明:ng-click 绑定(bind)到 onclick JavaScript 事件。除非您返回 false 或执行 event.preventDefault()，否则点击的默认行为将被执行，这将打开 href 中定义的 url > 属性。