0

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

0

1 Answer 1

1

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

5
  • 1
    Per you latest sample, alert(1) will run before alert(2). alert(2) will be executed only after DataFactory.GetData() is finished. While DataFactory.GetData is an async task, alert(1) will be executed immediately after DataFactory.GetData() starts. You can refer to this document to know more about promise.
    – Rebornix
    Jan 29, 2015 at 6:39
  • Yes. I do understand the 'reason' for that order. I needed guidance on how to form the code in such cases. So, there will be promise.then() for every factory functions and each of them should have $scope.common exclusively inside them. is this right?
    – sukesh
    Jan 29, 2015 at 6:58
  • @Qwerty Yep you are correct. We can define function $scope.common in the first place and call $scope.common() in every promise.then() of factory functions.
    – Rebornix
    Jan 29, 2015 at 7:03
  • I have updated the edit. Is this right if I want alert(2) to fire first and then alert(1)
    – sukesh
    Jan 29, 2015 at 7:08
  • You need to move alert(1) into $scope.common(). @Qwerty see my update.
    – Rebornix
    Jan 29, 2015 at 7:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.