离子框架Popover JQuery addClass

Question

我试图添加一个类到一个弹出框：

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

我已经在文档中尝试过了，并通过onclick =“ myfunction（）;发送” ..

但是，它只是不会将类添加到打开弹出框时将要调用的模板中的按钮上。

我认为这是因为弹窗仍未打开，所以在显示弹窗之后我可以这样做吗？

如何在弹出窗口加载后立即运行它？

这是控制器的代码：

$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);
  };

Answer 1

为什么不采用Angular绑定？ 我的意思是：在modal.shown事件处理程序上设置一个变量，并使用ng-class class基于该值应用特定的类。

请参见下面的代码段：

 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>