CODEWITHSUNDEEP
angularjs
sukesh
sukesh

Reputation: 2423

How to execute an action only after success - angularjs

New to angular and having a hard time comprehending this functionality. This is a chat simulator, where there is a textbox, a button and a display box. User enters a value into the textbox, presses the button and the same reflects in the display box.

Apart from displaying the user entered text, there is a data retrieval process using the user entered value.

After user has entered a value, I would like to disable the textbox, until the data is retrieved and then enable it again.

But with this code, the user entered text still shows up in display, while the data is being retrieved.

How should this code be designed in the first place. HTML:

<textarea ng-model="userInput"></textarea>
<a href="javascript:;" ng-click="GetNextItem()">Send</a>

JS:

$scope.EnableUserInput = true;
$scope.GetNextItem = function (){ 
   if($scope.EnableUserInput){
      //show user entered in display box 
      $scope.ChatHistory.push({            
        UserText: $scope.userInput,            
    }); 
    $scope.userInput = ""; 
  }
}
$scope.GetData()=function(id){
 DataFactory.GetData(id)
 .success(function (data, status) {
   $scope.EnableUserInput = false;
   $timeout(function () {
   $scope.ChatHistory.push((JSON.parse(data)));
   }, 2000);
   $scope.EnableUserInput = true;
 })
}

EDIT: if the above example is confusing, here is a simpler one.

$scope.MainFunction = function(){

   $scope.GetDataUsingFactory(){
     var promise = DataFactory.GetData();
     promise.then(){
       alert(2);
       $scope.common();
     })
   }
   //some more factory functions
   alert(1);
   $scope.common = function(){
   //common code to execute after all the FactoryFunctions are done getting data 
   }
}

What I want to happen is raise alert(2) first and then alert(1) & $scope.common(). But this is happening totally the other way.

Using angular 1.2.28

Upvotes: 0

Views: 1034

Answers (1)

Rebornix
Rebornix

Reputation: 5270

If you want to disable the textarea, you can add a ng-disabled directive like 

<textarea ng-model="userInput" ng-disabled="!EnableUserInput"></textarea>

Since you bind userInput to the textarea, the textarea won't get refreshed until the model changes.

Sample

$scope.common = function(){
   //some more factory functions
   alert(1);
   //common code to execute after all the FactoryFunctions are done getting data 
}
$scope.MainFunction = function(){
   $scope.GetDataUsingFactory(){
     var promise = DataFactory.GetData();
     promise.then(){
       alert(2);
       $scope.common();
     })
   }
   alert(3);

}

Then the sequence would be alert(3), alert(2), alert(1), common code

Upvotes: 1

Related Questions