2

今日はこの問題で頭を悩ませています。お願いします。以下のコードを見てください。第 2 レベルのコンポーネント スコープから onUpdate() メソッドを起動した後に Angular がこのエラーをスローする理由を説明できますか?

TypeError: 'in' 演算子を使用して '$ctrl' in 99 を検索することはできません

ありがとう！

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>

4

1 に答える 1

2

これを試して

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>

于 2016-05-18T04:51:21.737 に答える