angularjs - 跨嵌套组件绑定输出不起作用

Question

我今天一直在为这个问题挠头。请。看看下面的代码。你能解释一下为什么 Angular 在从二级组件作用域触发 onUpdate() 方法后会抛出这个错误吗？

TypeError: 不能使用 'in' 运算符在 99 中搜索 '$ctrl'

谢谢！

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

angular
  .module('app')
  .controller('appController',function($scope){
    var $ctrl = this;
    
    $ctrl.onUpdate = function(number){
      $ctrl.number = number;
    };       
  })
  
  // Firstlevel
  
  .component('firstLevel', {
    bindings : {
      onUpdate : '&'
    },
    controller: function($scope){   
      var $ctrl = this;
      
      $ctrl.otherStuff = 'other-stuff';

    },
    template : `
      <second-level data-on-update="$ctrl.onUpdate(number)"></second-level>
      `
  })
  
  // second-level
  
  .component('secondLevel', {
    bindings : {
      onUpdate : '&'
    },
    controller: function($scope){
      var $ctrl = this;
			
      $ctrl.save = function(newVal){
      	$ctrl.onUpdate({number:newVal})
      };
    },
    template : `
    	<button ng-click="$ctrl.save(99)">Save 99</button>
      `
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<div ng-app="app" ng-controller="appController as $ctrl">

<div>
# from second level: {{$ctrl.number}}
</div>

<first-level
  data-on-update="$ctrl.onUpdate(number)">    
  </first-level>
</div>

Answer 1

尝试这个

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

angular
  .module('app')
  .controller('appController',function($scope){
    var $ctrl = this;
    
    $ctrl.onUpdate = function(number){
      $ctrl.number = number;
    };       
  })
  
  // Firstlevel
  
  .component('firstLevel', {
    bindings : {
      onUpdate : '&'
    },
    controller: function($scope){   
      var $ctrl = this;
      
      $ctrl.otherStuff = 'other-stuff';

    },
    template : `
      <second-level data-on-update="$ctrl.onUpdate({number: number})"></second-level>
      `
  })
  
  // second-level
  
  .component('secondLevel', {
    bindings : {
      onUpdate : '&'
    },
    controller: function($scope){
      var $ctrl = this;
			
      $ctrl.save = function(newVal){
      	$ctrl.onUpdate({number:newVal})
      };
    },
    template : `
    	<button ng-click="$ctrl.save(99)">Save 99</button>
      `
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<div ng-app="app" ng-controller="appController as $ctrl">

<div>
# from second level: {{$ctrl.number}}
</div>

<first-level
  data-on-update='$ctrl.onUpdate({number: number})'>    
  </first-level>
</div>