CODEWITHSUNDEEP
javascriptangularjsasp.net-web-apiangularjs-scope
eAndy
eAndy

Reputation: 343

$scope-less Controller retrieving data from webapi doesn't update binding in AngularJS 1.3

ok, reading the link below, in Angular 1.3 they're recommending not using '$scope.x' inside the controller and instead using 'this.x'

https://docs.angularjs.org/api/ng/directive/ngController

What seems to break is calling to $http to get data (inherently async) but the binding doesn't get updated when a 2.4 second webapi call happens.

I can see that the webapi call is made and returns data but the data doesn't get updated to the page.

Every example I look at is using the $scope usage pattern. I'm trying to future proof my code as I have time.

here's the JSON that gets returned from the service

[{"Venue":"Index","Symbol":"ADDA.IDX","SecurityId":3320,"Type":"Index","Description":"AMEX Advance Decline Difference"},

{"Venue":"Index","Symbol":"ADDD.IDX","SecurityId":3321,"Type":"Index","Description":"OTC Advance Decline Difference"},
...

Here's the markup

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<body>
    <h1>My Test</h1>
    <div id="t" ng-controller="SecuritiesController as venue">
        <ul>
             <li ng-repeat="s in venue.securities">
                 {{s.SecurityId}} {{s.Symbol}} {{s.Description}}
             </li>
        </ul>
    </div>
    <script src="scripts/angular-1.3.js"></script>
    <script src="app/controllers/securityController.js"></script>
</body>
</html>

here's the controller

angular.module('myApp', []).controller('SecuritiesController', function ($http) {
    $http.get("/api/securities").success(function(results)
        { this.securities = results.data; }
    );
});

Upvotes: 0

Views: 519

Answers (2)

Manish Kr. Shukla
Manish Kr. Shukla

Reputation: 4477

Change your code to 

angular.module('myApp', []).controller('SecuritiesController', function ($http) {
    var controller = this;

    $http.get("/api/securities").success(function(results)
        { controller.securities = results.data; }
    );
});

Inside the response function, this actually refers to the Closure block instead of your controller.

Question Author: remove the .data and it works - my mistake!

Upvotes: 2

eAndy
eAndy

Reputation: 343

Here's the final fixed code. 

angular.module('myApp', []).controller('SecuritiesController', function ($http) {
    var controller = this;

    $http.get("/api/securities").success(function (results)
    { controller.securities = results; }
    );
});

Note: it appears that Angular/javascript doesn't support 'this' in the closure thus the need to explicitly define a capture variable

Upvotes: 0

Related Questions