Question

我正在尝试提供一种在呈现ng-repeat中的项目时显示加载对话框的方法。用例如下：用户单击切换开关以显示项目列表显示的指令包含项目的重复次数项目列表几乎立即显示在PC上。但是在移动设备上，列表显示需要几秒钟。这可能导致用户多次点击切换开关，导致列表被隐藏和显示。

这是我的HTML标记：

<div jqm-theme="b">
    <div style=""  jqm-theme="a" jqm-textinput ng-model="projectFilter"
         placeholder="Filter Project Areas...">
    </div>

    <div style="height:12px;"></div>

    <ul jqm-listview style="padding-top: 12px;">

        <project-display title="My Project Areas" filter="projectFilter" projects="myProjects"
                         select-project="selectProject" show="true">
        </project-display>

        <li jqm-li-entry jqm-theme="b" class="ui-icon-alt">
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <a class="projTitle">Toggle All Projects</a>
                </div>
                <div class="ui-block-b" style="text-align:right;">
                    <div jqm-flip mini="true" jqm-theme="d" ng-model="allSwitch.value"                         
                         on-label="On" on-value="1" off-label="Off" off-value="0"                                     
                         default-value="0" ng-click="toggleAllProj()">
                    </div>
                </div>
            </div>
        </li>

        <project-display title="All Project Areas" filter="projectFilter" projects="projects"
                         select-project="selectProject" show="allSwitch.value">
        </project-display>

    </ul>

</div>

这是指令：

angular.module('myApp').directive('projectDisplay', ['$location', function($location) {

return {
    restrict: 'E',
    scope: {
        title: '@',
        filter: '=',
        projects: '=',
        selectProject: '=',
        show: '='
    },
    templateUrl: 'template/directives/project-display.html'
};
}]);

这是指令的模板：

<div ng-show="show">
  <span style="margin-left:13px" jqm-li-divider>{{title}} ({{projects.length}})</span>
  <ul jqm-listview style="padding-top: 12px;">
    <li jqm-li-link jqm-theme="a" style="margin-left:13px" class="ui-icon-alt" ng-click="selectProject(project)"
    ng-repeat="project in projects | filter: filter">
    <a>{{project.title}}</a>
    </li>
  </ul>
</div>

我正在使用Angular JQM的$ loadDialog，它可以通过显式调用单独的方法来显示和隐藏，或者它也可以显示，直到解析了promise。

有没有办法监控ng-repeat中的所有项目何时被渲染？我很感谢你对此事的任何帮助。

由于

AngularJS：加载包含大量项目的ng-repeat的对话框

0 个答案: