Question

我需要一些关于我的第一个AngularJS项目的帮助（在官方教程之后）。它开始很好，因为我能够控制我的表单，提交我的ajax请求并按照我想要的分页显示结果......这不是很好吗？但现在我尝试制作一个ajax加载器。我认为可以使用ng-show指令，但我想尽可能使它成为通用的，这样我就可以在其他项目中重复使用它。

所以我开始创建一个指令（在此之后：Angularjs loading screen on ajax request）。现在一切都按照我想要的方式工作，除了ajax加载器永远不会显示。

似乎我的指令没有检查加载参数。我觉得我错过了关于范围的事情。

这是我的代码（简化）：

(function() {
var app = angular.module('querygen', []);

app.controller('QuerygenController',['$http', function($http){

    this.loading=false;

    this.getQueries = function(page){
        this.loading = true;
        querygen = this;
        $http.post('/action.php', data).success(function(data){
            querygen.loading = false;
        }).error(function(data){
            querygen.loading=false;
            alert('An error occured.');
        });
    };      

}]);  

app.directive('loading', function () {
  return {
    restrict: 'E',
    replace:true,
    template: '<div class="loading"><img src="images/loader.gif" alt="Loading..." /></div>',
    link: function (scope, element, attr) {
          scope.$watch('loading', function (val) {                  
              if (val)
                  element.show();
              else
                  element.hide();
          });
        }
      };
    });

})();

我的HTML：

 <div ng-controller="QuerygenController as querygenCtrl">
    <loading></loading>
    <div ng-show="!querygenCtrl.loading">
        <div ng-repeat="query in querygenCtrl.queries">        
            {{query}}
        </div>
    </div>
 </div>

此外，一旦我的问题解决了，如果我将指令放入另一个模块，并将新模块添加为“querygen”的依赖项，它是否会按原样运行？

Answer 1

我发布了答案。 MapOfVeins是对的。将this.loading更新为$scope.loading解决了我的问题。关于这个/ $范围，我确实错过了一些东西。谢谢！

创建一个ajax loader通用指令

1 个答案: