Ionic Framework Popover JQuery addClass

2019-06-12 15:45发布

站内问答 / JavaScript
1961 1 6

I am trying to add a class to a popover with:

$('#popoverbutton').addClass('someclass');

I've tried it in the document ready and sending it via onclick="myfunction();" ..

But it just won't add the class to the button that's in the template that is going to to be called when the popover is opened.

I'm thinking that it's because the popover is still not opened so could I do this after the popover is shown?

How can I get it to run some jquery as soon as the popover is loaded?

Here is the code for the controller:

$scope.usefulData = {};
  $ionicModal.fromTemplateUrl('templates/mypopover.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modalMypopover = modal;
  });

  $scope.closeMypopover = function() {
    $scope.modalMypopover.hide();
  };

  $scope.mypopover = function() {
    $scope.modalMypopover.show();
  };

  $scope.doMypopover = function() {
    console.log('Doing mypopover');

    $timeout(function() {
      $scope.closeMypopover();
    }, 1000);
  };

1条回答
Juvenile、少年°
2楼-- · 2019-06-12 16:13

Why don't you adopt Angular binding? I mean: set a variable on modal.shown event handler and use ng-class to apply a specific class based on that value.

See the snippet below:

angular.module('ionicApp', ['ionic'])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
  
  $scope.btnClass = 'button-positive';
  
  $ionicModal.fromTemplateUrl('templates/mypopover.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modalMypopover = modal;
  });
  
  $scope.$on('modal.shown', function() {
     $scope.btnClass = 'button-assertive myClass';
  });

  $scope.closeMypopover = function() {
    $scope.modalMypopover.hide();
    $scope.btnClass = 'button-positive';
  };

  $scope.mypopover = function() {
    $scope.modalMypopover.show();
  };

  $scope.doMypopover = function() {
    console.log('Doing mypopover');

    $timeout(function() {
      $scope.closeMypopover();
    }, 1000);
  };

});
.myClass {
  font-weight: bold;
  font-style: italic;
  color: blue !important;
}
<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    
    <title>Ionic Modal</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>
  <body ng-controller="AppCtrl">
    
    <ion-header-bar class="bar-positive">
      <h1 class="title">Popover</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item >
            <button class="button button-positive" ng-click="mypopover()">Popover
        </button>
        </ion-item>
      </ion-list>
    </ion-content>
    
    <script id="templates/mypopover.html" type="text/ng-template">
      <ion-modal-view>
        <ion-header-bar class="bar bar-header bar-positive">
          <h1 class="title">New Contact</h1>
          <button class="button button-clear button-primary" ng-click="closeMypopover()">Cancel</button>
        </ion-header-bar>
        <ion-content class="padding">
          <div class="list">
            <label class="item item-input">
              <span class="input-label">First Name</span>
              <input ng-model="newUser.firstName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Last Name</span>
              <input ng-model="newUser.lastName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Email</span>
              <input ng-model="newUser.email" type="text">
            </label>
            <button class="button button-full button-positive" ng-class="btnClass" ng-click="doMypopover()">Ok</button>
          </div>
        </ion-content>
      </ion-modal-view>
    </script>
    
  </body>
</html>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)