Question

我创建了一个使用$http调用获取其内容的模式。来自此$http来电的数据量因帐户而异。因此，有时模态尚未准备就绪，如果用户单击按钮打开模态，它将暂时不显示任何内容。

我想延迟点击事件，直到模态的内容准备就绪。我的意思是，我希望模态在完全渲染时打开。我尝试$timeout服务来做到这一点，但这并不好，因为有些帐户需要更多时间，而其中一些需要更少：

$('#modalLink').click(function(e) {
        e.preventDefault();
        $timeout(function() {
            $("#myModal").modal({
            persist: true,
            height: 'auto',
            maxWidth: 900,
            onClose: function (dialog) {
                $.modal.close();
             }
        });
        }, 500);
    });

那么如何将click事件设置为延迟，直到我的范围对象($scope.myArray)被定义为止？

Answer 1

您需要做的是，在$http已解决后设置某种旗帜：

$http.get('/url')
    .then(function(res) {
        $scope.flag = true;
    });

现在，在模态或模态触发按钮上设置ng-show，对于$scope.flag

为真

甚至更好的是，在模态上设置加载GIF，只要flag为假，它就会自动显示。一旦您的承诺解决，隐藏此加载图标，并显示您的模态内容。

<div class="modal">
    <div class="overlay" ng-show="!flag"></div>
    <div class="modal-content" ng-show="flag"></div>
</div>

您也可以在类似功能中禁用该按钮

Answer 2

假设按钮是

<button ng-disabled="isDisabled">Button</button>

在控制器中：

$scope.isDisabled = true;

$http.get('someUrl')
     .then(function(result){
     $scope.isDisabled = false;
})

这将确保在页面加载时禁用该按钮，但在函数调用后启用。

Answer 3

简单的答案是在加载数据时在模态中显示微调器。加载后，隐藏微调器并显示数据。我宁愿那样做。

但是，如果您不想显示微调器，您可以开始使用$ http加载数据，并在$ http.get，$ http.post等提供的Promise的.then（）语句中打开您的模态。

像

$('#modalLink').click(function(e) {
    e.preventDefault();
    $http.get(blablabla).then(fucntion(){
        //open your modal here
    };
});

请在此处详细了解承诺https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise

P.S。我还建议您使用服务方法从服务器获取数据。

更新

另外，请不要忘记使用.catch（）方法捕获错误。

Answer 4

尝试ui-bootstrap并以模态解析获取数据模态解析与路由器解析一样工作

示例：

$scope.openModal = $uibModal.open({ templateUrl: 'stackedModal.html', // you can use template option instead templateUrl size: 'sm', resolve: { items: function () { return //do something that you want. } } controller: function($scope, items) { //your data is in items injector. } });

如何延迟点击事件，直到$ http调用完成并且页面内容准备好了？

4 个答案: