【问题标题】：Scope doesn't refresh范围不刷新
【发布时间】：2015-06-30 22:01:16
【问题描述】：

我的 http.get 有问题。

Index.html

<div ng-repeat="element in elements">
<p>{{element.elementText}}</p>
</div>

app.js

我有两个控制器。第一个用 json 初始化 $scope.elements 并且可以工作：

$http.get('someUrl')
.success(function (response) {
 $scope.elements = response;
})

当 ng-click 调用范围函数时，第二次更新 $scope.elements 与另一个 json：

$scope.updateScope = function () {
$http.get('someOtherUrl')
.then(function (response) {
 $scope.elements = response.data;
});

但是当我调用 updateScope 时，什么也没有出现。我尝试使用 .success 但没有。我在将响应分配给 $scope.elements 后尝试使用 $scope.$apply 但它会产生错误（错误：[$rootScope:inprog] http://errors.angularjs.org/1.3.11/$rootScope/inprog?p0=%24digest）。

更新 - 如果我在范围元素上重新加载页面 ng-repeat 可以正常工作。 所以 $scope.elements 包含正确的值，但 ng-repeat 不会自行更新。对不起我的英语......

你能帮帮我吗？

【问题讨论】：

您是否验证过response 的外观？看起来和之前的反应一样吗？有回应吗？
是的，迈克尔·佩雷诺。它包含新值。
您是否验证过它应该直接设置为响应？我的观点是摘要已经在运行，所以它不是 Angular 错过了更新。第二个响应可能有一些不同。
等等，我刚刚注意到你提到你有两个不同的控制器；您是真的指控制器还是仅仅指更新数据的单个控制器范围之外的方法？
不，我有两个控制器，$scope.elements 在 .run(function ($rootScope) { $rootscope.elements = ''; }); 中初始化。

标签： angularjs angularjs-scope

【解决方案1】：

.then(function (response) { 和 .success(function (response) { 在它们的回调中获得不同的对象。在第一种情况下，您直接获取响应的数据，在第二种情况下，它将被包装在一个对象中（该对象还具有其他属性 - 如status、config、statusText 等）。

如果您使用.then，您的回复正文将位于sth.data，而不是sth。所以在你的情况下：

$scope.updateScope = function () {
$http.get('someOtherUrl').then(function (response) {
    $scope.elements = response.data;
});

【讨论】：

是的托梅克。对不起。我会编辑我的答案。但是还是不行。

【解决方案2】：

您可以使用angular.merge

angular.merge(object1, object2)

【讨论】：

【解决方案3】：

要使用服务共享数据，而不是根范围。考虑一个这样的例子：

HTML

<div ng-app="app">
    <div ng-controller="controller1 as vm">
        <input type="text" ng-model="vm.dataService.data" />{{vm.dataService.data}}</div>
    <div ng-controller="controller2 as vm">
        <input type="text" ng-model="vm.dataService.data" />{{vm.dataService.data}}</div>
</div>

JS

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

app.factory('DataService', function () {
    var data;
    return {
        data: 'Hello, World!'
    };
});

app.controller('controller1', function (DataService) {
    var vm = this;
    vm.dataService = DataService;
});

app.controller('controller2', function (DataService) {
    var vm = this;
    vm.dataService = DataService;
});

这是运行该代码的jsFiddle。

【讨论】：

谢谢迈克尔。我明白了。但我的问题是 ng-repeat 不会使用第二个控制器中设置的正确值更新自身。如果我重新加载页面，它可以工作。

【解决方案4】：

你可以试试下面的代码。（你需要包含$timeout）

$scope.updateScope = function () {
    $http.get('someOtherUrl')
    .then(function (response) {
    $scope.elements = response;
    $timeout(function(){
        $scope.$apply();
    });
});

【讨论】：

不，这不是必需的。第二个响应有些不同。