angularjs - Angularjs 过滤器使用和返回对象：未捕获错误：[$rootScope:infdig]

Question

我想创建一个使用并返回对象的自定义 angularjs过滤器。下面的代码在无限消化循环中失败。是什么导致了问题以及可能的解决方案是什么？

angular.module('app', [])

angular.module('app')
  .controller('ctrl', ['$scope', function ($scope) {
    $scope.obj = {
      word: 'world'
    }
  }])
  
angular.module('app')
  .component('myComp', {
    template: '<em>word: {{$ctrl.param.word}}</em>',
    bindings: {
      param: '<',
    }
  })
  
angular.module('app')
  .filter('greet', function () {
    return function (object) {
      return {
        word: 'Hello ' + object.word
      }
    }
  })

angular
  .bootstrap(document.querySelector('#app'), ['app']);
  

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>

<div id="app" ng-controller="ctrl">
  <my-comp param="obj | greet" ></my-comp>
</div>

我注意到如果过滤器输入是一个对象文字，那么一切正常。因此，每次按照infdig错误文档页面的建议调用过滤器时，它似乎与返回新对象没有直接关系。

angular.module('app', [])

angular.module('app')
  .controller('ctrl', ['$scope', function ($scope) {
    $scope.obj = {
      word: 'world'
    }
  }])
  
angular.module('app')
  .component('myComp', {
    template: '<em>word: {{$ctrl.param.word}}</em>',
    bindings: {
      param: '<',
    }
  })
  
angular.module('app')
  .filter('greet', function () {
    return function (object) {
      return {
        word: 'Hello ' + object.word
      }
    }
  })

angular
  .bootstrap(document.querySelector('#app'), ['app']);
  

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>

<div id="app" ng-controller="ctrl">
  <my-comp param="{ word: 'foo' } | greet" ></my-comp>
</div>

标签： angularjsangular-filters