Html 在页面加载的指令调用和AngularJS中的ajax调用上显示加载图像

我想在页面加载和ajax调用中显示图像，所以我创建了一个指令“lodder”。在html页面中，当我使用它时，它会显示警报（“hi-direvative”）。但是在detailscontroller.js中，我编写了$scope.loadingStatus=true，因此它应该显示img，但它没有显示

        -------------angular.js-------------
        var app= angular.module('myApp', ['ngRoute', 'ngAnimate', 'angular-ladda',                 'ui.bootstrap', 'uiSlider', 'ngCookies']);
       app.directive('lodder', function () {
            alert("hi direvtive");
            var directive = {
                restrict: 'A',
                template: '<div style="margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; background-color: rgb(102, 102, 102); z-index: 30001; opacity: 0.8;" ><p style="position: absolute; color: White; top: 50%; left: 50%;"><img src="http://localhost:60792/img/ajax-loader1.gif" ></p></div>',
                link: function (scope, element, attr) {
                    scope.$watch('loadingStatus', function (val) {
                  if (val)
                      $(element).show();
                  else
                      $(element).hide();
              });
          }
            };
            return directive;
        });
    ------------------html page------------
     <div class="content" ng-controller="detailsController" >
                              <lodder />-------------this is my directive
    --------------------detailsController.js------------
    var urlPrefix ='';
    function GetUsers() {
                $scope.loadingStatus = true;
                $http({
                    method: 'POST',
                    url: urlPrefix + '/Dashboard/GetUsers',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                }).success(function (results) {
                    $scope.userslist = JSON.parse(results.userslist);
                    $scope.loadingStatus = false;
                })
                .error(function (results) {
                    $scope.error = "An Error has occured while loading posts!";
                    $scope.loadingStatus = false;
                });
            };
            GetUsers();
    ----------------------------finish------------------

-----------angular.js-------------
var app=angular.module（'myApp'，['ngRoute'，'ngAnimate'，'angular ladda'，'ui.bootstrap'，'uiSlider'，'ngCookies']）；
应用指令（'lodder'，函数（）{
警惕（“高方向”）；
var指令={
限制：“A”，
模板：'
，
链接：功能（范围、元素、属性）{
范围$watch（'loadingStatus'，函数（val）{
if（val）
$（元素）.show（）；
其他的
$（元素）.hide（）；
});
}
};
返回指令；
});
------------------html页面------------
-------------这是我的指令
--------------------detailsController.js------------
var url前缀=“”；
函数GetUsers（）{
$scope.loadingStatus=true；
$http({
方法：“POST”，
url:urlPrefix+'/Dashboard/GetUsers'，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”
}).成功（功能（结果）{
$scope.userslist=JSON.parse（results.userslist）；
$scope.loadingStatus=false；
})
.错误（函数（结果）{
$scope.error=“加载帖子时出错！”；
$scope.loadingStatus=false；
});
};
GetUsers（）；
----------------------------完成------------------

尝试使用angular block ui，当所有ajax调用的页面都是block时。为什么不签出这篇文章：Mikko Viitala----我已经尝试了你的选项，但仍然不起作用。