Question

我的想法是，我在加载数据时显示加载的.gif文件，然后在加载所有数据后，等待x时间，当前为3000毫秒，但会降低，然后在给定的时间量，将data.show的值设置为true，以便不再显示加载.gif并且表格为。

那么，如何从HTML，ng-show中的JavaScript引用show？

任何帮助将不胜感激！

谢谢：）

编辑：这可以解决这个问题 - setTimeout v $timeout

HTML

 <div ng-show="!show">
    <img id="loader" src="resources/ajax-loader.gif">
</div>

<div ng-show="show">
    <div class="ui grid center aligned">
        <div class="column thirteen wide">
            <table id="errorTable" class="ui compact celled definition table">
                <p>Stuff</p>
            </table>
        </div>
    </div>
</div>

的JavaScript

function onSuccess(response) {
    controller.errors = response.data;
    setTimeout(function () {
        $('#errorTable').DataTable({
            "lengthMenu": [[6], [6]],
            "dom": '<"toolbar">frtip'
        });
        $("div.toolbar").html('<div class="ui input left floated"><input type="text" placeholder="Search..."></div>');
        $scope.show = true;
    }, 3000);
}

Answer 1

问题是你没有在开头定义$ scope.show。您可能不需要show.data。请在控制器的开头添加以下行

$scope.show = false;

将html更改为：

 <div ng-show="!show">
    <img id="loader" src="resources/ajax-loader.gif">
</div>

<div ng-show="show">
    <div class="ui grid center aligned">
        <div class="column thirteen wide">
            <table id="errorTable" class="ui compact celled definition table">
                <p>Stuff</p>
            </table>
        </div>
    </div>
</div>

在控制器中：

您已在setTimeout外添加了$ scope.show.data，并根据需要将其添加到setTimeout函数中并添加：

function onSuccess(response) {
    controller.errors = response.data;
    $timeout(function () {
        $('#errorTable').DataTable({
            "lengthMenu": [[6], [6]],
            "dom": '<"toolbar">frtip'
        });
        $("div.toolbar").html('<div class="ui input left floated"><input type="text" placeholder="Search..."></div>');
        $scope.show = true;
    }, 3000);
}

Here是我尝试过的傻瓜

Answer 2

尝试在控制器中添加$scope.show = { data: false };

Answer 3

由于没有div.toolbar，意思是，$('div.toolbar')将是null/undefined，这导致该语句处的空指针并且下一个语句未被执行，因为执行具有就在此之前就停了下来。

简单的解决方案可能是将$scope.show.data = true;作为function调用的setTimeout中的第一个语句。

Angular.js - $ scope不从setTimeout（）更新

HTML

的JavaScript

3 个答案: