кнопка включения/выключения угловой кнопки по директиве

Question

Я новичок в Angular, и я застрял на этом уже целый день. У меня есть контент для модального вытягивания с директивой, которая содержит простую форму. Я хочу, чтобы конечные пользователи дважды щелкали при отправке формы. Пока это шкафы, которые я получил. Содержимое и модальное подтягивание нормально, когда кнопка нажата, она отключается, аакс-вызовы выполняются нормально, модальный снова скрывается, но кнопка остается отключенной. Когда я кнопка говоря я отсылаю к кнопке на модальном содержимом с идентификатором = «submitTradeForm»

Это содержание в модальном

<div class="cdc-modal"> 
 

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

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

 
     <div class="modal-footer"> 
 
      <input id="submitTradeForm" type="button" ng-click="createTrade()" ng-disabled="isProcessing" class="btn cdc-button" value="Add new trade" /> 
 
     </div> 
 
    } 
 

 
</div>

Это JS/Угловой код

//********************** 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('<option value="' + data[i].TradeId + '">' + data[i].Name + '</option>'); 
 
           } 
 

 
           scope.isProcessing = false; 
 
          } 
 

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

 
         
 
         
 
        }; 
 

 
       }; 
 

 
      } 
 
     } 
 
    }); 
 

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

Это в основном вид

<div ng-app="empApp" ng-controller="empCtrl" class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
      <h3>Add New Employee</h3> 
 

 
      @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" }) 
 

 
       <div class="row" style="margin-bottom:15px;"> 
 
        <div class="form-group col-sm-12"> 
 
         @Html.TextBoxFor(m => m.EmployeeNumber, new { @placeholder = "employee number", @class = "form-control pull-left col-sm-8" }) 
 
         <span style="min-width:160px;margin-top:5px;" class="col-sm-4 cdc-text pull-left">last entered: @lastentered</span> 
 
        </div> 
 
       </div> 
 
       <div class="form-group"> 
 
        @Html.TextBoxFor(m => m.FirstName, new { @placeholder = "first name", @class = "form-control", @id = "firstname" }) 
 
       </div> 
 
       <div class="form-group"> 
 
        @Html.TextBoxFor(m => m.LastName, new { @placeholder = "last name", @class = "form-control", @id = "lastname" }) 
 
       </div> 
 
       <div class="form-group"> 
 
        @Html.TextBoxFor(m => m.StoreAs, new { @placeholder = "store as", @class = "form-control", @id = "storeas" }) 
 
       </div> 
 
       <div class="row" style="padding-bottom:15px;min-width:320px !important;"> 
 
         <div id="selectContainer" class="col-sm-8 pull-left" style="max-width:280px;"> 
 
          <select id="trades" multiple="multiple"> 
 

 
           @if (Model.Trades.Any()) 
 
           { 
 
            foreach (CDCManagement.Trade trade in Model.Trades) 
 
            { 
 
             <option value="@trade.TradeId">@Html.Encode(trade.Name)</option> 
 
            } 
 
           } 
 
          </select> 
 
         </div> 
 
         <a href="#" onclick="addTrade()" data-toggle="modal" data-target="#createTradeModal"> 
 
          <span class="glyphicon glyphicon-plus cdc-icon col-sm-4 pull-left cdc-icon-push" style="padding-left:0;"></span> 
 
         </a> 
 
       </div> 
 
       <div class="form-group"> 
 
        @Html.TextBoxFor(m => m.PhoneNumber, new { @placeholder = "phone number", @class = "form-control" }) 
 
       </div> 
 
       <div class="form-group"> 
 
        @Html.TextAreaFor(m => m.Comments, new { @placeholder = "comments", @class = "form-control" }) 
 
       </div> 
 
       <div class="form-group"> 
 
        <input id="createButton" type="button" onclick="processForm()" class="btn cdc-button" value="Add New Employee" /> 
 
       </div> 
 
        
 
      } 
 

 
     </div> 
 
    </div> 
 

 
    <!-- modal begin (add title) --> 
 
    <div class="modal fade" id="createTradeModal"> 
 
     <div id="modal-dialog" class="modal-dialog"> 
 
      <div id="modal-content" class="modal-content"> 
 
       <div class="modal-header"> 
 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
        <h4 class="modal-title">Add New Trade</h4> 
 
       </div> 
 
       <div id="modal-body" class="modal-body"> 
 
        <emp-modal></emp-modal> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <!-- modal end --> 
 

 
</div>

Answer 1

Вы смешивание JQuery и угловатое, и ударили очень общую ловушку использования события JQuery для запуска что-то в угловом, в данном случае ответе AJAX.

Всякий раз, когда что-то меняется, о чем нужно знать, вам необходимо вызвать $digest. В Интернете есть lots ресурсов, и я настоятельно рекомендую вам получить хорошее представление об угловом жизненном цикле перед написанием кода.

Чтобы устранить проблему, вы должны просто быть в состоянии изменить следующую строку:

scope.isProcessing = false; 

К

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

Это говорит Угловое вы меняете что-то, что он должен знать о том, и он запускает свой цикл дайджеста, который соответственно обновляет все представления. Это снова включит кнопку, которую вы ранее отключили.

В стороне: я не уверен, что вы рефакторинг существующего приложения, чтобы использовать углы или начинать с нуля. В любом случае, вы должны попытаться удалить свою зависимость от jQuery, если для этого не существует конкретной причины. This stackoverflow question - отличная рекомендация, которая заставит вас задуматься о том, что «угловой путь». Если вы можете обойти это, он будет выплачивать дивиденды.