在AngularJS中思考-在AJAX请求中修改DOM的正确方法是什么？

Question

I'm brand new to AngularJS. I've read over "Thinking in AngularJS" if I have a jQuery background? and the answers made a lot of sense. However, I'm still having a hard time translating what I want to do without relying on jQuery.

My request seems fairly simple. I have a form that does an AJAX call when submitted. I want the Submit button to visually update to inform the user on the the AJAX request status. The Submit button won't be updated with simple text, but instead be updated with text plus a icon. The icon is in HTML which means I can't use AngularJS simple data binding.

I have this request working in jsFiddle .

HTML

<div ng-app >
    <form id="id_request" ng-controller="RequestCtrl">
        <input id="id_title" name="title" ng-model="request.title" type="text" class="ng-valid ng-dirty" />
        <button type="submit" class="btn btn-primary" ng-click="submitRequest($event)">
            Submit
        </button>
    </form>
</div>

AngularJS

function RequestCtrl($scope, $http) {
    $scope.request = {};
    $scope.submitRequest = function($event) {
        $($event.target).prop("disabled", true).html('<i class="icon-refresh icon-spin"></i> Submitting</a>');
        $http({
            method : 'GET',
            url : '/ravishi/urSDM/3/',
            data : $.param($scope.request),
            headers : {
                'Content-Type' : 'application/x-www-form-urlencoded',
            }
        }).
        success(function(data, status, headers, config) {
            console.log("success");
            console.log($event);
            // This callback will be called asynchronously when the response is available.
            $($event.target).html('<i class="icon-ok"></i> Success').delay(1500).queue(function(next) {
                $(this).removeAttr("disabled").html("Submit");
                next();
            });
        }).
        error(function(data, status, headers, config) {
            console.log("error");
            // Called asynchronously if an error occurs or server returns response with an error status.
            $($event.target).html('<i class="icon-warning-sign"></i> Error').delay(1500).queue(function(next) {
                $(this).removeAttr("disabled").html("Submit");
                next();
            });
        });
    }
}

I am completely aware that this is the wrong way to do it in AngularJS. I shouldn't be updating the DOM in my controller and I should by trying to avoid jQuery completely.

From what I gather, I need to use directives. I've seen some examples but can't think of a nice way to update the button's HTML through the multiple states it goes through. There are four states of the button:

1 Initial -> 2 Submitting -> 3 Error or 4 Success -> 1 Initial

My first thought is to update an arbitrary button attribute in the controller. Then in the directive, I would somehow retrieve the attribute value and conditionally update the HTML appropriately. With this approach, I am still unsure of how to link the status of the AJAX request to the button's HTML in the directive. Should I forgo the AJAX call in the controller and instead do the AJAX call in the directive by binding to the button's click event? Or, is there is a better way to do this?

Answer 1

The main change you have to do is to move away from manipulating DOM and rather do all changes on the model itself. Here is an example where I used two separate properties $scope.icon and $scope.locked to control icon style and button state: http://jsfiddle.net/CpZ9T/1/

Answer 2

In you case, I think you definitely should create a directive to encapsulate the button with its behavior. Here's an example:

HTML

<div ng-app='app'>
  <form id="id_request" ng-controller="RequestCtrl">
    <input id="id_title" name="title" ng-model="request.title" type="text" class="ng-valid ng-dirty" />
    <my-button state="state" click-fn="submitRequest()"></my-button>
  </form>
</div>

Javascript

angular.module('app', [])
    .directive('myButton', function() {
    return {
        restrict: 'E',
        scope: { state: '=', clickFn: '&' },
        template: '<button type="submit" class="btn btn-primary" ng-click="clickFn()" ng-disabled="disabled">' +    
                  '  <i ng-class="cssClass"></i>' + 
                  '  {{ text }}' + 
                  '</button>',
        controller: function($scope) {
            $scope.$watch('state', function(newValue) {                                                    
                $scope.disabled = newValue !== 1;
                switch (newValue) {
                    case 1:
                        $scope.text = 'Submit';
                        $scope.cssClass = ''; 
                        break;
                    case 2:
                        $scope.text = 'Submitting';
                        $scope.cssClass = 'icon-refresh icon-spin';  
                        break;
                    case 3:
                        $scope.text = 'Error';
                        $scope.cssClass = 'icon-warning-sign';  
                        break;
                    case 4: 
                        $scope.text = 'Success';
                        $scope.cssClass = 'icon-ok';  
                        break;
                }
            });
        }        
    };
})
.controller('RequestCtrl', function ($scope, $http, $timeout) {
    $scope.state = 1;
    $scope.request = {};

    $scope.submitRequest = function() {
        $scope.state = 2;
        $http({
            method : 'GET',
            url : '/ravishi/urSDM/3/',
            data : $.param($scope.request),
            headers : {
                'Content-Type' : 'application/x-www-form-urlencoded',
            }
        }).
        success(function(data, status, headers, config) {            
            $scope.state = 4;
            $timeout(function() { $scope.state = 1; }, 1500);
            console.log("success");                       
        }).
        error(function(data, status, headers, config) {
            $scope.state = 3;
            $timeout(function() { $scope.state = 1 }, 1500);
            console.log("error");                        
        });
    }
});

jsFiddle here .