Question

我正在进行ajax调用以从服务器获取一些信息，然后更新屏幕上的列表。信息即将发布，但范围尚未更新！我尝试过使用$ apply（），我只是收到错误

代码如下所示：

在正确的控制器内部，在HTML中：

<div ng-controller=controller_1>
  <div ng-controller=controller_2>

    <button ng-click="myfunction()">click</button>

  </div>
</div>

在角度controller_1中，我们定义了$scope.vendorsarray

在角度controller_2中，注入$ scope，我们有

$scope.function = function(){

  Factory.ajaxfactoryAction($scope.itemsarray).success(function(data, status, headers, config) {
    $scope.vendorsarray = data

    // POINT A
  }

// POINT B

}

现在，如果我在A点和B点进行console.log($scope.vendorsarray)，在B点（首先触发，因为它不必等待ajax），我得到旧的{{1} }。在A，然后我得到新的，正确的，vendorsarray。但是，vendorsarray仍未在浏览器中更新！发生了什么事？

感谢您的帮助。

修改

以下是我尝试实施$ apply（）的方法：

vendorsarray

这是错误（在控制台中）：

https://docs.angularjs.org/error/ $ rootScope / inprog？P0 = $消化

$scope.function = function(){

  Factory.ajaxfactoryAction($scope.itemsarray).success(function(data, status, headers, config) {
    $scope.vendorsarray = data

    var temp = $scope.vendorsarray

    $scope.$apply(function() {
      $scope.vendorsarray = temp;
    });
  }

}

Answer 1

但是随后在浏览器中仍然没有更新vendorarray！发生了什么事？

这里的问题（简言之）是每个控制器都有自己的$scope.vendorsarray副本。

您可以使用service在两个控制器之间共享数据模型。角度服务是单身。依赖于服务的每个组件都会获得对服务工厂生成的单个实例的引用。

以下示例显示了此解决方案的基本结构：

var app = angular.module('module', [])

.factory('shared', function() {
    var shared = {
      "data": [],
      "counter": 0
    };
    return shared;
  })

.controller('Ctrl1', ['$scope', 'shared',
  function($scope, shared) {
    $scope.shared = shared;
    $scope.add = function() {
      $scope.shared.data.push("Item " + $scope.shared.counter++);
    }
  }
])

.controller('Ctrl2', ['$scope', 'shared',
  function($scope, shared) {
    $scope.shared = shared;
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="module">
  <div ng-controller="Ctrl1">
    CONTROLLER 1
    <button ng-click="add()">ADD</button>
  </div>
  <div ng-controller="Ctrl2">
    CONTROLLER 2
    <ul>
      <li ng-repeat="item in shared.data">{{item}}</li>
    </ul>
  </div>
</div>

$ scope.variable在AJAX之后没有改变

1 个答案: