angularjs enable/disable button on a directive

Question

I'm new to Angular and I've been stuck on this for a day already. I have content for a modal being pulled with a directive which contains a simple form. I want to keep end-users from double clicking when submitting the form. So far this is the closets I've gotten. The content and modal pull up ok, when the button is clicked it gets disabled, the ajax calls is performed ok, the modal hides again, but the button remains disabled. When I mention button I refer to the button on the modal content with id="submitTradeForm"

This is the content in the modal



    @using (@Html.BeginForm("_CreateTrade", "Employees", FormMethod.Post, new { @class = "cdc-form", @id = "createTradeForm" }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(null, new { @class="text-danger" })

        
            @Html.TextBoxFor(m => m.Name, new { @class = "form-control", @placeholder = "trade" })
        

        
            
        
    }

This is the JS/Angular code

    //********************** ANGULARJS - BEGIN *****************************************//

    var app = angular.module('empApp',[]);

    app.controller('empCtrl', function ($scope) {

    });

    app.directive('empModal',function($compile){
        return {
            restrict: 'EA',
            templateUrl: '@Url.Content("~/Employees/_CreateTrade")',
            replace: true,
            controller: function ($scope) {

            },
            compile: function (tElement, tAttr) {

                var contents = tElement.contents().remove();
                
                var compiledContents;

                return function (scope, iElement, iAttr) {

                    if (!compiledContents) {
                        compiledContents = $compile(contents);
                    }

                    compiledContents(scope, function (clone, scope) {
                        iElement.append(clone);
                    });

                    scope.createTrade = function () {

                        scope.isProcessing = true;

                        var form = $("#createTradeForm");

                        $.ajax({
                            cache: false,
                            async: true,
                            type: "POST",
                            url: form.attr("action"),
                            data: form.serialize(),
                            success: function (data) {

                                $("#createTradeModal").modal("hide");

                                //empty the container
                                $("#trades").html("");

                                var sel = $("#trades");

                                var newCont = "";

                                for (var i = 0; i < data.length; i++) {
                                    sel.append('');
                                }

                                scope.isProcessing = false;
                            }

                        }).complete(function () {
                            scope.isProcessing = false;
                            console.log('completed');
                            console.log(scope.isProcessing);
                        });

                        
                        
                    };

                };

            }
        }
    });

    //********************** ANGULARJS - END   *****************************************//

This is in the main View


    
        
            Add New Employee

            @using (Html.BeginForm("Create", "Employees", FormMethod.Post, new { @id = "createEmployeeForm"}))
            {
                    
                @Html.AntiForgeryToken()
                @Html.ValidationSummary(null, new { @class="text-danger" })
                @Html.Hidden("selectedTrades", null, new { @id="selectedTrades" })

                
                    
                        @Html.TextBoxFor(m => m.EmployeeNumber, new { @placeholder = "employee number", @class = "form-control pull-left col-sm-8" })
                        last entered: @lastentered
                    
                
                
                    @Html.TextBoxFor(m => m.FirstName, new { @placeholder = "first name", @class = "form-control", @id = "firstname" })
                
                
                    @Html.TextBoxFor(m => m.LastName, new { @placeholder = "last name", @class = "form-control", @id = "lastname" })
                
                
                    @Html.TextBoxFor(m => m.StoreAs, new { @placeholder = "store as", @class = "form-control", @id = "storeas" })
                
                
                        
                            
                        
                        
                            
                        
                
                
                    @Html.TextBoxFor(m => m.PhoneNumber, new { @placeholder = "phone number", @class = "form-control" })
                
                
                    @Html.TextAreaFor(m => m.Comments, new { @placeholder = "comments", @class = "form-control" })
                
                
                    
                
                    
            }

        
    

    
    
        
            
                
                    
                    Add New Trade

Ed_ · Accepted Answer

You're mixing jQuery and angular, and have hit the very common pitfall of using a jQuery event to trigger something in angular, in this case an AJAX response.

Whenever something changes that angular needs to know about, you need to trigger a $digest. There are lots of resources on the web about this, and I strongly recommend you get a good understanding of the angular lifecycle before writing any more code.

To fix your problem, you should simply be able to change the following line:

scope.isProcessing = false;

To

scope.$apply( function() { 
  isProcessing = false;
});

This tells angular you're changing something that it should know about, and it runs its digest loop which updates all of the views accordingly. This will re-enable the button that you previously disabled.

As an aside: I'm not sure if you're refactoring an existing application to use angular, or starting from scratch. Either way, you should try to remove your dependence on jQuery unless there is a specific reason for it. This stackoverflow question is a great reference that should get you thinking about things 'the angular way'. If you can get your head around this, it will pay dividends.

angularjs enable/disable button on a directive

Answers (1)

Related Questions