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 for more details. — PSL
– PSL, Commented Jun 27, 2015 at 1:48
Like @PSL said, if you are using controller as, inside your controller you should use this instead of $scope. — Eric Martinez
– Eric Martinez, Commented Jun 27, 2015 at 1: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
– Ravi Sahu, Commented Jun 27, 2015 at 2:19

ivkremer · Accepted Answer · 2015-06-27 02:08:28Z

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, 2015 at 2:08

ivkremer

1,2753 gold badges25 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:26:39Z

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, 2017 at 10:26

CommunityBot

11 silver badge

answered Jun 27, 2015 at 7:15

Praveen

851 silver badge12 bronze badges

Collectives™ on Stack Overflow

AngularJS HTML not updating after POST success

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related