Question

尝试将数据绑定到AngularJS中的模板时出现问题。这是我的控制器中的$ scope：

$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!");
        }
 );

我使用像下面这样的html模板：

<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>

我的应用，模块和控制器都是正确的，我没有复制到这篇文章。看起来似乎2路绑定无法正常工作。

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

我尝试使用$ apply但不行。请帮我救一天！

Answer 1

您在控制器和$ http（）中使用$ scope。

1-确保两者都指向相同的范围。（使用console.log（$ scope）并比较）

2-在调用$ http（）之前，在控制器中填充$ scope.user然后在$ http（）中成功，使用console.log（$ scope.user）; - 如果未定义，则表示它们不在同一范围内

尽量不要在控制器中直接使用$ http（），创建服务并调用该服务。

下面是我用于在allangular项目中调用API的服务。

＆＃39;使用严格的＆＃39;;

app.service（＆＃39; ajaxService＆＃39;，[＆＃39; $ rootScope＆＃39;，＆＃39; $ http＆＃39;，＆＃39; $ q＆＃39;，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;

}]）;

Answer 2

嗨，这是http获取返回的在线示例，请检查

我认为你是像这个例子的返回数组，有一个对象的数组你必须返回对象。

        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>

Angular双向绑定不能与html模板一起使用

2 个答案: