ons-dialog 数据绑定不起作用

Question

使用 ons-dialog 显示弹出窗口以提示用户注册时事通讯。我有 3 秒超时，这样他们就不能在不阅读 it/waiting 3 秒的情况下立即退出提示。

我想要显示禁用 'close' 按钮的对话框，然后以编程方式取消禁用该按钮。

这是我的 JavaScript 代码：

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

这是我的按钮代码：

<ons-toolbar-button var="cancelButton" ng-disabled="{{myBool}}" id="cancelButton" ng-click="naviDialog.hide()">X</ons-icon></ons-toolbar-button>

我还将 {{myBool}} 放在虚拟按钮的文本字段中以观察它是否发生变化....它不会更改并更新屏幕，我必须单击虚拟按钮才能更改该按钮中的文本。但是，即使我可以查看变量的变化，我的 ons-dialog 工具栏中的 ons-button 也没有启用..

绑定好像有问题？虽然我不太确定....

有人遇到过这个问题吗？

编辑：

这是我的 HTML 代码：

    <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>

这是我的控制器代码：

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

Answer 1

您不应在 ng-disabled 指令中使用插值。

应该是：

ng-disabled="myBool"

更新

另一个问题是 setTimeout 的使用。 setTimeout 在 Angular 环境之外执行，因此它不会启动摘要循环，观察者也不会获取属性中的更改。

解决方案是使用 $timeout，这将调用一个新的摘要循环。

另外，$timeout 使应用程序更易于测试。

This 似乎是一篇关于 $timeout 的好文章。

ons-dialog 数据绑定不起作用

ons-dialog data binding not working

javascript

angularjs

onsen-ui