Hello! Sorry for my bad English, but I have a problem.
I have two < timer > directives (plugin “Angular Timer”). One in some div and other in IonicPopup creating from templateUrl in this div.
<ion-content id="main" ng-controller="TimerCtrl" scroll="false">
<div class="row">
<div class="col col-50 col-offset-25"><h1 id="timer"><timer autostart="false" interval="1000" finish-callback="timeoutRollPopup()" countdown="3">{{mminutes}}:{{sseconds}}</timer></h1></div>
</div>
<div class="row">
<div id="buttons" class="col col-50 col-offset-25"><button class="button icon-left ion-clock button-positive" ng-click="startStopTimer()" id="control-button">Старт</button></div>
</div>
<script id="roll-timer-popup.html" type="text/ng-template">
<div style="text-align:center;"><h3><timer autostart="false" interval="1000" countdown="5" id="timer2">{{mminutes}}:{{sseconds}}</timer></h3></div>
</script>
</ion-content>
I can’t start timer from ionicPopup in my controller because angular don’t see it. This code return error like “object does not exist”:
document.getElementsByTagName('timer')[1].start();
If I place timer to simple div it’s works!
<div class="col col-50 col-offset-25"><h1 id="timer"><timer autostart="false" interval="1000" finish-callback="timeoutRollPopup()" countdown="3">{{mminutes}}:{{sseconds}}</timer></h1></div>
Function which must start timer in ionicPopup:
angular.module('xxx', ['ionic', 'timer'])
.controller('TimerCtrl', function($scope, $document, $ionicPopup, $timeout, $interval) {
showRollPopup = function() {
var alertPopup = $ionicPopup.show({
title: 'Title',
templateUrl: 'roll-timer-popup.html'
});
console.log(document.getElementsByTagName('timer')[1]); -- write "undefined"
document.getElementsByTagName('timer')[1].start();
$timeout(function() {
alertPopup.close();
}, 5000);
};
});
How can I use custom directives in ionicPopup correctly? Thanks!
ionicframework v1.0.0-beta.14
I am newbie in web apps development