angularjs – ng-click不在离子侧菜单中的离子项上工作

发布时间：2020-12-17 17:34:54 所属栏目：安全来源：网络整理

导读：我有一个幻灯片进/出面板.除了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

我有一个幻灯片进/出面板.除了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时,侧面板关闭,控制器没有任何反应.

解决方法

查看代码,现在不可能在离子项上使用ng-click,因为Ionic基本上创建了一个新的锚点< a>.标记并仅保留href&目标属性.

所以基本上,你的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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!