Question

使用ons对话框显示弹出窗口以提示用户注册newsleter。我有一个3秒的超时，所以他们不能只是立即退出提示而不读它/等待3秒。

我想要显示禁用“关闭”按钮的对话框，然后以编程方式取消禁用按钮。

这是我的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对话框中工具栏中的ons按钮也无法启用..

似乎绑定存在问题？虽然我不太确定......

有人有这个问题吗？

编辑：

这是我的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数据绑定无法正常工作

1 个答案: