4

我只是开始学习 angular.js。你们能告诉我正确的方法来制作一个页面，该页面最初显示一个 ajax 加载器元素，上面写着“正在加载数据”或类似的东西。然后在获取数据后，它将更新视图并隐藏元素。我可以使用 jquery 将内容放入页面加载事件中，但是您如何使用纯角度来做到这一点？到目前为止，我想出了如何将其放入点击事件中：

<div ng-app="VideoStatus" ng-controller="VideoStatusCtrl">
    <button ng-click="getVideos()">get videos</button>
</div>
<script type="text/javascript">
    angular.module('VideoStatus', ['ngResource']).run(function(){ 
       // I guess somehow I can start fetching data from the server here, 
      //  but I don't know how to call Controller methods passing the right scope 
    });

    function VideoStatusCtrl($scope, $resource) {
        $scope.videoStatus = $resource('/Videos/GetStatuses', { callback: 'JSON_CALLBACK' });

        $scope.getVideos = function () {
            $scope.videoResult = $scope.videoStatus.get();
            console.log('videos fetched');
        };
    };
</script>
4

1 回答 1

3

感谢 亚当·韦伯和彼得·培根·达尔文

这是工作的小插曲

这是我的版本plunker，它使用模态弹出功能将加载作为指令

这是使用我的版本的教程

您只需要 loading.js 和 modal.js 并参考 jQuery 和 twitterbootstrap css。

在你的代码中，

您只需对代码执行 2 个步骤。

  1. 将以下代码添加到 HTML

    <div 数据加载></div>

  2. 将LoadingModule模块添加到您的应用程序模块。

    angular.module('YourApp', ['LoadingModule'])

于 2012-11-06T19:05:14.997 回答