ng-click 不适用于离子侧菜单内的离子项目

Question

我有一个幻灯片 in/out 面板。除了 Logout 之外，一切对我来说都很好。请查看侧面板视图。

    <ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
    <!-- -->
      <ion-nav-back-button>
      </ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    <!-- -->
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Angular Social</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close href="#/app/dashboard">
            <i class="icon ion-home"></i>
          Dashboard
        </ion-item>
        <ion-item menu-close href="#/app/friends">
            <i class="icon ion-person-stalker"></i>
          Friends
        </ion-item>
        <ion-item menu-close href="#/app/settings">
            <i class="icon ion-gear-a"></i>
          Settings
        </ion-item>
        <ion-item menu-close href="#/app/search">
            <i class="icon ion-search"></i>
          Search
        </ion-item>
        <ion-item menu-close ng-click="ac.logout()">
            <i class="icon ion-log-out"></i>
          Logout
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

下面是我的控制器代码

(function () {
    'use strict';

    angular.module('starter').controller('DashboardController', DashboardController);
    DashboardController.$inject = ['UserService', '$scope', '$state', 'CommonService' ,'$ionicLoading'];

    function DashboardController(UserService, $scope, $state, CommonService, $ionicLoading)
    {
        var ac = this;
        ac.logout   = logout;

        initController();

        function logout()
        {
            console.log('reachedhere');
            CommonService.logout()
        }

        function initController()
        {
            var loggedInStatus = localStorage.getItem('userLoggedIn');
            if (loggedInStatus === 'false') {
                $state.go('signin');
            }
            loadCurrentUser();
            loadnotifications();
        }

        function loadCurrentUser()
        {
            var name = { 'username' : localStorage.getItem('username') };
            UserService.GetByUsername(name).then(function (response) {
                $scope.userData = response;
            });
        }

        function loadnotifications()
        {
            $ionicLoading.show({
                template: 'loading'
            });
            var name = { 'username' : localStorage.getItem('username') };
            UserService.GetByUsername(name).then(function (data) {
                var id = data.id;
                console.log(data.id);
                UserService.GetFriedRequests(id).then(function (response) {
                    $scope.requests = response;
                });
            });
            $ionicLoading.hide();
        }
    }

})();

当我点击 Logout 时，侧面板关闭并且控制器没有任何反应。

Answer 1

查看代码，现在无法在 ion-item 上使用 ng-click，因为 Ionic 基本上是在创建一个新的锚点 <a> 标签并且只保留 href & target 里面的属性。

所以基本上，您的 ng-click 被忽略了。看这里的代码：https://github.com/driftyco/ionic/blob/v1.2.4/js/angular/directive/item.js#L44

你基本上必须创建自己的另一个指令来处理这样的点击：

angular.module('starter').directive('logOut', function() {
    return {
        link: function($scope, element) {
            element.on('click', function() {
                ac.logout()
            });
        }
    }
});

然后在视图中使用它：

<ion-item menu-close log-out>
      <i class="icon ion-log-out"></i>
      Logout
</ion-item>

ng-click 不适用于离子侧菜单内的离子项目

ng-click not working on ion-item inside ion-side-menu

angularjs

angularjs-ng-click

ionic-framework

ionic