AngularJS HTML not updating after POST success

Question

I'm trying to have an item in HTML update after a successful post query, but I can't seem to get it to work. Here's the HTML side:

<div class='container' ng-controller='MainController as inputControl' >
    <div class='row well well-sm'>

         <div class='col-md-6'>

            <h2>Input Parameters</h2>

            <form name='addform'  ng-submit='inputControl.mainAddition()'>
                 <label>Number 1:</label>
                 <input ng-model='inputControl.inputData.num1' type="number" />
                     <br>
                 <label>Number 2:</label>
                 <input ng-model='inputControl.inputData.num2' type="number" />
                    <br>
                 <input type='submit' value='Add them!'/>
            </form>

         </div>

        <div class='col-md-6'>
            <h2>Result</h2>
            <P>{{inputControl.resultData}}</P>
        </div>

    </div>
</div>

And here's the Angular side:

angular.module('pageLoader')
    .controller('MainController',['$scope', '$http',  function($scope, $http) {
       var controller = this;
       this.inputData = {};
        $scope.resultData = 0;

       this.mainAddition = (function() {
           console.log(this.inputData);
           $http({
               method: 'POST', 
               url: '/functions', 
               data: this.inputData
           })
           .success( function(data, status, headers, config){
               console.log(data);
               $scope.resultData= (data);
           });
           this.inputData = {};

       });
    }]);

The console log shows the correct response from the server, but the resultData in HTML isn't populating.

Edit:

Yeah, sorry, I totally mixed up $scope and this. Find below working code

angular.module('pageLoader')
    .controller('MainController',['$scope', '$http',  function($scope, $http) {

       this.inputData = {};
       this.resultData = 0;

       this.mainAddition = (function() {
           var cntrlCache = this;
           console.log(this.inputData);
           $http({
               method: 'POST', 
               url: '/functions', 
               data: this.inputData
           })
           .success( function(data, status, headers, config){
               console.log(data);
               cntrlCache.resultData= data;
           });
           this.inputData = {};

       });
    }]);

Guess you are completely confused between assigning to scope and using controllerAs. Instead of setting it to scope set the data to `this.inputData.resultData`. But be aware you will have to cache `this` to another variable just before the callback. See [this](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback) for more details. — PSL, Jun 27 '15 at 01:48
Like @PSL said, if you are using `controller as`, inside your controller you should use `this` instead of `$scope`. — Eric Martinez, Jun 27 '15 at 01:51
when you are using controller as syntax you should remove $scope dependency from controller. Use "this.variable_to_be_shown" for all variables those are binded to view and use "var other_variable" for intermediate variables. — Ravi Sahu, Jun 27 '15 at 02:19

score 1 · Accepted Answer · answered Jun 27 '15 at 02:08

1

The easiest way to correct your snippet is to change $scope to controller in

$scope.resultData= (data);

since you've already declared var controller = this in the beginning.

answered Jun 27 '15 at 02:08

ivkremer

1,234
3
23
42

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

Since the response is a html,you should use inject $sce service in the controller and do the following in the success method of the $http service

$scope.resultData = $sce.trustAsHtml(data)

Also its really a bad practice to have Async methods in the controller.Try to leverage angular services.

Please refer the SO Answer

edited May 23 '17 at 10:26

Community

1
1

answered Jun 27 '15 at 07:15

Praveen

85
1
12

AngularJS HTML not updating after POST success

2 Answers2