We tend to give class to each form that the controller works with and the button so that we can identify button uniquely, and using jquery we get hold of the button and toggle the spinner gif on and off but this approach ties the controller with with UI a lot.

What could we do to hardwiring the controllers with the form classes ?

We tend to give class to each form that the controller works with and the button so that we can identify button uniquely, and using jquery we get hold of the button and toggle the spinner gif on and off but this approach ties the controller with with UI a lot.

What could we do to hardwiring the controllers with the form classes ?

• javascript
• jquery
• angularjs

• Formulate the question better and/or add an example. – Mosho Commented Mar 31, 2014 at 4:14

2 Answers 2

If you want a more declarative and easier way of doing this, I have been working on a module for AngularJS 1.2.0+ called ngBusy. It's still early, but pretty straight-forward.

It includes an $http interceptor that keeps track of initiated, pending, and closed requests and broadcasts events so you can respond. It also includes a directive that you can use to easily display spinners or display loading messages while requests are pending, and toggles back when they are done. It can respond to all requests, or you can match it to specific URLs or even tag requests with names that it'll filter on.

Basic example:

<button type="submit" busy="Please wait...">Submit</button>

Example with spinner:

<button type="submit" busy>
   <busy-message><i class="fa fa-refresh fa-spin"></i> Please wait...</busy-message>
   Submit
</button>

Only respond to requests to a certain URL:

<button type="submit" busy busy-when-url="api/myresoure/save">
   <busy-message><i class="fa fa-refresh fa-spin"></i> Please wait...</busy-message>
   Submit
</button>

Add or remove classes to the element:

<button type="submit" busy busy-when-url="api/myresoure/save" busy-add-classes="btn-disabled" not-busy-remove-classes="btn-disabled">
   <busy-message><i class="fa fa-refresh fa-spin"></i> Please wait...</busy-message>
   Submit
</button>

And so on. You can visit the demo and documentation site, or check out the source.

Have a property on the scope that indicates when the page is busy...

$scope.submit = function () {
    $scope.busy = true;
    $http.get('/someUrl').success(function () {
        $scope.busy = false;
    });
};

Then use ngShow and other directives to change the state of your screen element based on the busy flag...

<button ng-disabled="busy" ng-click="submit()">
    Submit
    <i class="fa fa-spinner fa-spin" ng-show="busy"></i>
</button>

Live example... http://jsbin./rujizeqa/1/edit?html,js,output