angularjs angularjs-directive angularjs-scope onsen-ui

Disable Directive For particular function

I am using this directive to show 'loading' division on $http service request.

var module = angular.module('my-app', ['onsen', 'ngAnimate', 'ngMessages']);

module.directive('loading', ['$http', function ($http) {
return {
    restrict: 'AE',
    link: function ($scope, element, attrs, ctrl) {
        $scope.isLoading = function () {
            return ($http.pendingRequests.length > 0);
        };
        $scope.$watch($scope.isLoading, function (v) {
            if (v) {
                element.removeClass('ng-hide');
            } else {
                element.addClass('ng-hide');
            }
        });
    }
};
<body ng-controller="BodyController">
    <div loading class="spinner-container">
      <img src="images/loading.svg" class="spinner" />
    </div> 
</body>

Want to disable it if this particular function is executing.

module.controller('BodyController', function ($scope, $http, $interval) {

     $scope.getNotificationCount = function () {
                 var url="http://stackoverflow.com"  // any url, stackoverflow is an example
                 var query = "";
                 $http({
                    method: 'POST',
                    url: url,
                    data: query,
                    headers: {
                              'Content-Type': 'application/x-www-form-urlencoded'
                             }
                       }).
                   success(function (data) {
                   console.log("success");     
               }).error(function (data) {
                     console.log("error");
                   });
            }; 
            $interval($scope.getNotificationCount,30000);
});

I want this because I am calling getNotificationCount() function in $interval() and I don't want to display this my custom loading html div on screen again n again.

Is there any way to achieve this? Help me.

Solution

module.directive('loading', ['$http', function ($http) {
return {
    restrict: 'AE',
    scope : {
         isDisabled : '=' // Added new attribute to disable and enable the directive
    },
    link: function ($scope, element, attrs, ctrl) {
        $scope.isLoading = function () {
            return ($http.pendingRequests.length > 0);
        };
        $scope.$watch($scope.isLoading, function (v) {
            if(!scope.isDisabled){
            // Do things only when isDisabled property is false
              if (v) {
                element.removeClass('ng-hide');
              } else {
                element.addClass('ng-hide');
              }
            }
        });
    }
};

And your html code should be,

<body ng-controller="BodyController">
    <div loading is-disabled="isLoaderDisabled" class="spinner-container">
      <img src="images/loading.svg" class="spinner" />
    </div> 
</body>

Here, isLoaderDisabled is a scope variable. Now you can disable and enable your directive by just set true or false to your scope variable $scope.isLoaderDisabled.

$scope.isLoaderDisabled = false; // Initialize
module.controller('BodyController', function ($scope, $http, $interval) {
     $scope.isLoaderDisabled = true; // disable your loading directive
     $scope.getNotificationCount = function () {
                 var url="http://stackoverflow.com"  // any url, stackoverflow is an example
                 var query = "";
                 $http({
                    method: 'POST',
                    url: url,
                    data: query,
                    headers: {
                              'Content-Type': 'application/x-www-form-urlencoded'
                             }
                       }).
                   success(function (data) {
                   console.log("success");     
               }).error(function (data) {
                     console.log("error");
                     $scope.isLoaderDisabled = false; // enable your directive
                   });
            }; 
            $interval($scope.getNotificationCount,30000);
});

You should enable your directive on each success function.