Ионного Framework поповера JQuery addClass

Я пытаюсь добавить класс к пирогу с:Ионного Framework поповера JQuery addClass

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

Я попробовал его в документе готовы, и отправить его через OnClick = «MyFunction();» ..

Но он просто не добавит класс к кнопке, которая находится в шаблоне, который будет вызываться при открытии popover.

Я думаю, что это потому, что popover все еще не открывается, так что я могу сделать это после отображения popover?

Как я могу заставить его запустить некоторый jquery, как только загрузится popover?

Вот код для контроллера:

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

источник

2016-01-14 Satch3000

Почему бы вам не принять Угловая связывание? Я имею в виду: установить переменную в обработчике событий modal.shown и использовать ng-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>

источник

2016-01-14 16:16:14 beaver

Ионного Framework поповера JQuery addClass

ответ

Смежные вопросы