CODEWITHSUNDEEP
javascriptangularjs
Prometheus
Prometheus

Reputation: 33655

How to apend the value of a button then change it back

I would like to add a directive to any button that replaces the button value with the word loading. Then somehow have a function which will revert the value of the button back when I call that function anywhere in my code (say after ajax load).

I am wondering how this can be done in AngularJS.

First, I think I create a directive...

.directive('spinnerButton', function () {
    return {
        restrict: 'A',

        link: function (scope, element, attrs) {
            element.bind('click', clickedButton);

            function clickedButton() {
               //get button change  add the words loading...
            }
        }
    }
});

on my buttons as the directive...

  <div ng-click="loadsomething()" spinner-button>All Projects</div>

then somehow recall the drivetive to say revert back....

etc 

.then(function (objects) {
                        //remove loading message

                    },

Upvotes: 2

Views: 57

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191779

You can use two way data binding for a loading property that is shared by the directive and the outer scope. When you click the element, set loading to true. Set loading to false in the outer scope (e.g. loadsomething) when the loading is done.

You can use transclusion to change what the button displays.

return {
    restrict: "A",
    transclude: true,
    template: "<div ng-transclude ng-hide=loading></div>"
        + "<img ng-show=loading src=throbber.gif>",
    scope: {loading: "=spinnerButton"},
    link: function (scope, elem) {
        elem.bind("click", function () { scope.loading = true; });
    }
};

<div ng-click="loadsomething()" spinner-button=loading>All Projects</div>

http://jsfiddle.net/Loq0sm5w/

Upvotes: 1

Related Questions