CODEWITHSUNDEEP
javascriptangularjsonsen-ui
slowsword
slowsword

Reputation: 314

ons-dialog data binding not working

Using a ons-dialog to show a popup to prompt the user to sign up for a newsleter. I have it on a 3 second timeout so that they can't just imediately quit the prompt without either reading it/waiting the 3 seconds.

I want the show the dialog with the 'close' button disabled then un-disable the button programmatically.

Here is my JavaScript code :

setTimeout(function() {
    try {                              
        $scope.myBool = "FASLE";
        document.getElementById('cancelButton').setAttribute('disabled', '');
    } catch(e) { 
        alert(e);
    }
}, 3000);

This 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 have also put {{myBool}} in a text field of a dummy button to watch if it changes.... it does not change and update the screen, I have to click the dummy button for it to change the text in that button. However, even after I can view the change in the variable, the ons-button in the toolbar in my ons-dialog does not enable..

Seems if there is an issue with the binding? Though I'm not too sure....

Anyone have this problem?

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

Upvotes: 1

Views: 223

Answers (1)

Szabolcs D&#233;zsi
Szabolcs D&#233;zsi

Reputation: 8843

You shouldn't use interpolation in the ng-disabled directive.

It should be:

ng-disabled="myBool"

Update

An additional problem was the use of setTimeout. setTimeout executes outside the Angular environment so it won't kick off a digest cycle and watchers won't pick up the changes in the properties.

The solution is to use $timeout which will invoke a new digest cycle.

As an extra, $timeout makes the application more testable.

This seems like a good article about $timeout.

Upvotes: 2

Related Questions