角度雙向綁定不能與html模板一起使用

我在嘗試將數據綁定到AngularJS中的模板時遇到了問題。這是在我的控制範圍$：角度雙向綁定不能與html模板一起使用

$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但不行。請幫我保存我的一天！

來源

2016-06-25 LaLa

什麼不工作？ – Chrillewoodz

感謝Chillewoodz的回覆。在視圖模板中ng-binding總是返回空白。 – LaLa

你好，這是HTTP GET回報在線樣本，檢查

我認爲你是返回的數組這樣的例子，陣列您必須對返回對象的一個對象。

 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>

來源

2016-06-25 09:39:06 Maher

非常感謝Maher。當我回到我的電腦時，我會嘗試。 – LaLa

好吧這樣做..祝你好運 – Maher

您正在使用兩個控制器$範圍和$ HTTP（）。

1調用$ HTTP（）之前，請確保兩者都指向同一個範圍。（使用的console.log（$範圍）和比較）

2-，在控制器填充$ scope.user和然後在$ http（）成功後，使用console.log（$ scope.user）; - 如果未定義則表示它們不在同一範圍內

儘量不要在控制器中直接使用$ http（），創建一個服務並調用該服務。

下面是我用來調用allangular項目中的API的服務。

'use strict';

app.service（ 'ajaxService'，[ '$ rootScope'， '$ HTTP'， '$ Q'，函數（$ 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;

}]） ;

來源

2016-06-25 09:48:53

謝謝你的建議。如你寫的，他們不在同一個範圍內。 – LaLa

角度雙向綁定不能與html模板一起使用

回答

相關問題