加载指令时如何实现禁用

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

Answer 1

您可以使用Angular自己的ngDisabled指令，而不用编写自己的指令。

Answer 2

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;
                });
            }
        };
    });

Answer 3

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>