javascript - 更改 Angular Controller 变量

Question

angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}
];
});

function abc(){
 $.ajax({url: "demo_test.txt", success: function(result){
     $scope.names = result; // here
 }});
}

我想通过结果更改scope.names的内容(它将是json格式)，然后通过 Angular 渲染内容。

我想澄清一下，我必须使用函数内部的 get 请求，所以不能使用 Angular 的 $http

Answer 1

使用 $http 而不是 ajax，因为 $http 负责运行摘要循环，该循环负责 2 路绑定(bind)。

function abc(){
  $http.get("demo_test.txt")
  .then(function(result){
     $scope.names = result;
  });
}

如果出于某种原因您无法使用$http，那么您必须调用$scope.$apply方法来设置作用域值，因为它在内部运行摘要循环。

function abc(){
 $.ajax({
    url: "demo_test.txt", 
    success: function(result){
      $scope.$apply(function () {
         $scope.names = result;
      });
    }
 });
}

如果您的 Controller 外部有 abc 方法，那么您必须获取如下所示的 Controller 范围，但这不是 Angular 推荐的。

function abc(){
 var $scope = angular.element('[ng-controller=namesCtrl]').scope();
 $.ajax({
    url: "demo_test.txt", 
    success: function(result){
      $scope.$apply(function () {
         $scope.names = result;
      });
    }
 });
}