How to implement a disable when loading directive

Question

Hi I have a variable on my scope named loadingdata. It will have the values true or false to determine if data is loading or not. I would like to put an attribute on an element to disable it if data is loading. Here is the code I already have but it is not working:

module.directive('disableWhenLoadingData', function () {
            return {
                restrict: 'A',
                scope: {},
                link: function ($scope, element, attrs) {
                    $scope.$watch('loadingData', function(newValue, oldValue) {
                        element.attr('disabled', newValue);
                    });
                }
            };
        });

any ideas

Looks like you haven't set any binding for it in the scope option: scope: { loadingData: '=' }? (of course you'd also have to set that attribute in the view) — Marc Kline
– Marc Kline, Commented Jun 13, 2014 at 16:37

Strille · Accepted Answer · 2014-06-13 16:43:50Z

3

You can use Angular's own ngDisabled directive instead of writing your own.

answered Jun 13, 2014 at 16:43

Strille

5,7913 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Kang · Accepted Answer · 2014-06-13 16:47:29Z

1

Service:

module.factory('GetDataService', function ($http) {
    return {
        getCustomers: function() {
            return $http({ url: '/someurl', method: 'GET'});
        }
    }
});

Directive:

 module.directive('disableWhenLoadingData', function (GetDataService) {
        return {
            restrict: 'A',
            scope: {},
            link: function ($scope, element, attrs) {
                $scope.loadingData = true;
                GetDataService.getCustomers().success(function (data) {
                    $scope.loadingData = false;
                });
            }
        };
    });

answered Jun 13, 2014 at 16:47

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Comments

Brian Noah · Accepted Answer · 2014-06-13 18:31:36Z

0

Generally I set $scope.loading in my controller, and my button or whatever i set ng-disabled.

In my controller:

$scope.loadData = function () {
    $scope.loading = true;
    $http
        .get('url')
            .success(function (ret) {
                $scope.loading = false;
            });
}

In my view:

<button ng-disabled="loading" ng-click="loadData()">{{loading? 'loading Data' : 'Submit'}}</button>

answered Jun 13, 2014 at 18:31

Brian Noah

2,99220 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to implement a disable when loading directive

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related