Utilizing an ons-dialog to display a popup prompting the user to sign up for a newsletter. I have set a 3-second timeout to prevent users from immediately closing the prompt without reading it or waiting.
I aim to initially show the dialog with the 'close' button disabled, then programmatically enable the button.
The following is my JavaScript code :
setTimeout(function() {
try {
$scope.myBool = "FASLE";
document.getElementById('cancelButton').setAttribute('disabled', '');
} catch(e) {
alert(e);
}
}, 3000);
Below is my button code :
<ons-toolbar-button var="cancelButton" ng-disabled="{{myBool}}" id="cancelButton" ng-click="naviDialog.hide()">X</ons-icon></ons-toolbar-button>
I also inserted {{myBool}} in a text field of a dummy button to observe if it changes.... unfortunately, it does not update the screen until I click the dummy button. Even after seeing the change in the variable, the ons-button in the toolbar within my ons-dialog remains disabled.
It appears there might be an issue with binding? However, I'm uncertain....
Has anyone encountered this problem before?
EDIT:
Here is my HTML code:
<ons-navigator var="myNav">
<ons-page>
<ons-toolbar inline>
<div class="center">
Join Us
</div>
<div class="right">
<ons-toolbar-button ng-disabled="myBool" var="cancelButton" id="cancelButton" ng-click="naviDialog.hide()">X</ons-icon></ons-toolbar-button>
</div>
</ons-toolbar>
<div style="text-align: center">
<p>
<i class="fa fa-envelope-o fa-4x"></i>
</p>
<p>
Join our mailing list to receive special offers and insider information.
</p>
<input type="email" class="text-input text-input--underbar"
placeholder="Email" value="" style="color:black; width:80%;">
<p>
<ons-button onclick="myNav.pushPage('signup.html')">Submit</ons-button>
</p>
</div>
</ons-page>
</ons-navigator>
Here is my controller code:
app.controller('welcomePopupController', function($http, $scope, $compile, $sce, $window, filterFilter){
$scope.myBool = true;
setTimeout(function(){
try{
console.log('re-enabling button');
$scope.myBool = false;
}
catch(e){alert(e);}
}, 3000);
});