Question

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

以下代码应： - 显示2个视图：1显示左侧的一些名称（＆＃34;接收器＆＃34;）和一个显示主要内容（一个介绍或相应人员的列表（＆＃34; currentReceiver＆＃34;））） - 通过$ state.go导航到相应的＆＃34;心愿单＆＃34;并将URL更改为＆＃34; ... /＃/ wishlist /＆＃34;

我的代码似乎只有在我第一次点击名字时才有效...一旦我点击了一次，网址就会空了（＆＃39; ... /＃/＆＃39 ;）并显示介绍页面......

有人可以解释一下我做错了什么，或者我应该在哪里调试这个问题......？

我的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 （视图模板＆＃39;愿望清单＆＃39;在左侧希望链接到功能＆＃34; setCurrentReceiver＆＃34;）

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

    ];

wishlist.js （以便在url =＆＃39; /＆＃39;）时显示左侧和介绍页面的视图

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绑定到onclick JavaScript事件。除非您return false或执行event.preventDefault()，否则将执行点击的默认行为，并打开href属性中定义的网址。

angularJS：ui-router $ state.go仅适用于首次点击

1 个答案: