Angular two way binding not working with html template

Question

I have a issue when try binding data to template in AngularJS. This is $scope in my controller:

$scope.user = {
    ADID: "",
    DomainLogonName: "",
}
$scope.viewDetailUser = function (userId) {
    var apiUrl = "/api/User/Detail?userId=" + id;
    $http.get(getPath).then(
        function (success) {
            var data = success.data.Data; // always have data here  
            $scope.user = {
                ADID: data.ADID, // always have data here
                DomainLogonName: data.DomainLogonName, // always have data here
            }   
        }, 
        function (error) {
           alert("Error!");
        }
 );

I use html template like bellow:

<div class="row">
    <div class="col-xs-3">
        <label>Domain Logon Name</label>
    </div>
    <div class="col-xs-3">
        <span>{{user.DomainLogonName}}</span>
    </div>
    <div class="col-xs-3">
        <label>ADID</label>
    </div>
    <div class="col-xs-3">
        <span>{{user.ADID}}</span>
    </div>
</div>

My app, modules, and controller are correct and i'm not copy to this post. Look seem 2 way binding not working.

<span>{{user.ADID}}</span>
<span class="ng-binding"></span>  <= always display blank

I'm try use $apply but not ok. Please help me save my day!

Thanks Chillewoodz for reply. In the view template ng-binding always return blank. — LaLa
– LaLa, Commented Jun 25, 2016 at 9:36

Milad Shahbazi · Accepted Answer · 2016-06-25 09:48:53Z

You are using $scope in both controller and $http().

1- make sure both are pointing to the same scope.(use console.log($scope) and compare )

2- before calling the $http(), populate $scope.user in controller and then in success of $http(), use console.log($scope.user); - if it is undefined it means that they are not in the same scope

try not to use $http() directly in the controller, create a service and call that service.

below is the service I use for calling APIs in allangular projects.

'use strict';

app.service('ajaxService', ['$rootScope', '$http', '$q', function ($rootScope,$http, $q) {

var obj = {};

obj.api = "http://www.........."; // the address of the api Server


obj.AjaxPost = function (route, data)
{
    var deferred = $q.defer();

    $http.post(obj.api + route, data).success(function (response, status, headers, config) {

        deferred.resolve(response, status);
    }).error(function (response) {

        deferred.reject(response);
    });
    return deferred.promise;
}


obj.AjaxGet = function (route, data) {

    var deferred = $q.defer();
    $http({ method: 'GET', url: obj.api + route, params: data ? data : {} }).success(function (response, status, headers, config) {

        deferred.resolve(response, status);
    }).error(function (reason) {

        deferred.reject(reason);
    });

    return deferred.promise;
};

// You have to have an Iframe in you page with Id 'downloadHelper'
obj.DownloadFile = function (route, data) {

    var qsArray = new Array();

    var counter = 0;
    for (var propt in data) {

        qsArray.push(propt + '=' + data[propt]);

        counter++;
    }

    var qs = (counter > 0 ? '?' : '') + qsArray.join('&');

    document.getElementById('downloadHelper').setAttribute('src', obj.api + route + qs);

}

return obj;

}]);

Thank you for suggestion. Such as you write, they are not in the same scope.

Community · Accepted Answer · 2020-06-20 09:12:55Z

Hi this is online sample with http get return, check it

I think you are return array like this example, array with one object you have to return object for that.

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

        app.controller("ctrl", function ($scope, $http) {
            var root = "http://jsonplaceholder.typicode.com";

            $scope.user = {
                ADID: "",
                DomainLogonName: "",
            }

            $scope.viewDetailUser = function (id) {
                var apiUrl = root + "/users?id=" + id;

                $http.get(apiUrl).success(function(response) {
                    var data = response[0]; //first object
                    $scope.user = {
                        ADID: data.website, // always have data here
                        DomainLogonName: data.username // always have data here
                    }
                });
            };

            ///
            $scope.viewDetailUser(1);

        });

<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl">
<head>
    <title></title>
</head>
<body>

    <div class="row">
        <div class="col-xs-3">
            <label>Domain Logon Name</label>
        </div>
        <div class="col-xs-3">
            <span>{{user.DomainLogonName}}</span>
        </div>
        <hr />
        <div class="col-xs-3">
            <label>ADID</label>
        </div>
        <div class="col-xs-3">
            <span>{{user.ADID}}</span>
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script></body>
</html>

Collectives™ on Stack Overflow

Angular two way binding not working with html template

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related