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

时间:2016-01-04 07:48:50

标签: angularjs ionic-framework ionic angularjs-ng-click

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

1 个答案:

答案 0 :(得分:4)

查看代码,目前无法在ng-click上使用ion-item,因为Ionic基本上创建了一个新的锚<a>标记并且仅保留{{1} }&amp;其中包含href个属性。

基本上,你的target被忽略了。请查看此处的代码:https://github.com/driftyco/ionic/blob/v1.2.4/js/angular/directive/item.js#L44

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

ng-click

然后在视图中使用它:

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