CODEWITHSUNDEEP
.netangularjs
Pat Migliaccio
Pat Migliaccio

Reputation: 1070

Bindings not updating $scope.$apply inside $http

First time using Angular and I am trying to simply update some bindings from a http request. My response comes back correctly but I can't seem to get the changes to take effect. Ideally I would like the response to update in a manner similar to the code that is commented out. If my setup is wrong, please enlighten me as I am entirely new to Angular.

JS

var app = angular.module('nameApp', []);

app.controller("index", function ($scope, $http) {
    $scope.sendCall = function () {
        $http({
            url: "AngularJS.aspx/GetObject",
            method: "POST",
            data: {}
        })
        .then(function (response) {
            $scope.$apply(function () {
                //$scope = response.data.d;
                $scope.Name = "me";
            });
        },
        function (response) {

        });
    }
});

HTML

    <div ng-app="nameApp" ng-controller="index">

        Name: <input type="text" ng-model="Name" />
        Favorite Color: <input type="text" ng-model="Color" />
        <br>
        Details: {{Name}}<br />
        <button ng-click="sendCall()">Run!</button>
    </div>

Upvotes: 1

Views: 230

Answers (1)

Red2678
Red2678

Reputation: 3297

You should not need the apply. Like below:

var app = angular.module('nameApp', []);

app.controller("index", function ($scope, $http) {
    $scope.sendCall = function () {
        $http({
            url: "AngularJS.aspx/GetObject",
            method: "POST",
            data: {}
        })
        .then(function (response) {
             $scope.Name = response.data.d;
        },
        function (response) {
            //err
        });
    }
});

The HTML:

<div>
    {{Name}}
</div>

Upvotes: 2

Related Questions