Ionic Framework Popover JQuery addClass [英] Ionic Framework Popover JQuery addClass
问题描述
我正在尝试将一个类添加到一个popover中：
I am trying to add a class to a popover with:
$('#popoverbutton').addClass('someclass');
我已经准备好了文件并通过onclick =myfunction（）;发送了它..
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?
如果加载popover后如何让它运行一些jquery？
How can I get it to run some jquery as soon as the popover is loaded?
以下是控制器的代码：
$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);
};
推荐答案
为什么不采用Angular绑定？我的意思是：在 modal.shown 事件处理程序上设置一个变量，并使用 ng-class 来应用基于的特定类这个价值。
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.
请参阅下面的代码：
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>
这篇关于Ionic Framework Popover JQuery addClass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
