javascript - Angular JS $scope.$apply 给出插值错误 "TypeError: Converting circular structure to JSON"

Question

我写了一个自定义 Angular Directive(指令)，如下所示:

dirs.directive('sectionInfo', function(){
    return {
        restrict: 'E',
        templateUrl: 'partials/section-home.html',
        transclude: true,
        controller: function($scope, $routeParams){
            var section = this;
            section.sectionItem = [];

            client.entries({"some params"}, 
                function(err, entries){
                    if (err) { console.log(err); return; }
                    $scope.$apply(function(){
                        section.sectionItem = entries;
                });
                }
            );
        },
        controllerAs: 'sectionCtrl'
    }
});

然后这会显示在单独的部分页面中，如下所示:

<section-info></section-info>
<ul class="list-group">
  <li class="list-group-item" ng-repeat="entry in entriesCtrl.index_items">
    <a href="#/entries/{{entry.sys.id}}">
        <h4>{{entry.fields.title}} <small>{{entry.fields.author}}</small></h4>
    </a>
  </li>
</ul>

部分模板代码很简单:

{{sectionCtrl.sectionItem}}

当我加载此页面并保留 $scope$apply 调用时，我收到一个错误:

Error: error:interr Interpolation Error Can't interpolate: {{sectionCtrl.sectionItem}} TypeError: Converting circular structure to JSON

当我删除 $scope.$apply 调用时，它就消失了。知道是什么导致了 $scope.$apply 调用中的循环引用吗？

编辑:条目内容和错误消息的控制台日志。

Answer 1

发生的事情是你有一个循环引用，这意味着一个对象通过它的一个属性或元素引用它自己。 (在您的图片中， sys 字段似乎在引用其父对象)。为了说明这里有一个示例，其中包含一个通过字段引用自身的对象，您不能将其转换为常规 JSON。这将警告错误。

angular.module("so", []);

console.error = function(msg){
  console.log("Well, an error occurred, here's what it said:" + msg);
}

angular.module("so").controller("AnswerCtrl", function($scope){

  // make a thing, and put the thing in itself
  $scope.thing = { somefield: 'lalalala' };
  $scope.thing.circle= $scope.thing;

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="so" ng-controller="AnswerCtrl">
  {{ thing }}
</div>

所以这个问题与 Angular 关系不大，但更多的是 Angular 使用 JSON.stringify 或类似的东西将对象转换为 JSON 字符串，以便它可以显示它在 View 中。

您可以做的是，首先 - 不要尝试显示带有循环引用的实际对象。您可以很好地显示它的一部分，但不要尝试将循环对象序列化为 JSON。

如果你想显示所有属性，你可以使用 something like this answer , 在这里演示:

angular.module("so", []);

console.error = function(msg){
  console.log("Well, an error occurred, here's what it said:" + msg);
}

angular.module("so").controller("AnswerCtrl", function($scope){

  // make a thing, and put the thing in itself
  $scope.thing = { somefield: 'lalalala' };
  $scope.thing.circle= $scope.thing;

  var cache = [];
  $scope.viewThing = JSON.stringify($scope.thing, function(key, value) {
    if (typeof value === 'object' && value !== null) {
      if (cache.indexOf(value) !== -1) {
        return;
      }
      cache.push(value);
    }
    return value;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="so" ng-controller="AnswerCtrl">
  {{ viewThing }}
</div>

如果你必须显示它，使用this libary