加载数据ajax样式

时间:2012-11-06 18:58:27

标签: javascript angularjs

我开始学习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>

1 个答案:

答案 0 :(得分:3)

感谢Adam Webber & Peter Bacon Darwin

这是工作plunker

这是我的版本plunker ,它将加载作为带有模态弹出功能的指令

以下是使用我的版本的教程

你只需要loading.js和modal.js并引用jQuery和twitterbootstrap css。

在你的代码中,

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

  1. 将以下代码添加到HTML

    &LT; div data-loading&gt; &LT; / DIV&GT;

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

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