ネストされたコンポーネント間の出力が正しく動作しない

Question

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

TypeError: Cannot use 'in' operator to search for '$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; 
 
\t \t \t 
 
     $ctrl.save = function(newVal){ 
 
     \t $ctrl.onUpdate({number:newVal}) 
 
     }; 
 
    }, 
 
    template : ` 
 
    \t <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

あなたが表現バインディング（&）を定義しているので、あなたがdata-on-update="$ctrl.onUpdate(number)"

としてHTMLでそれをバインドしたい 場合は、明示的に番号を含むJSONでそれを呼び出す必要があります

確かにAngularはこの番号があなたのHTMLに何であるかを理解する必要があり、 はあなたのスコープの一部ではないので、次のようにして "locals"と呼ばれるものをあなたの呼び出しに追加する必要があります：

data-on-update="$ctrl.onUpdate({number: number})" 

Answer 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; 
 
\t \t \t 
 
     $ctrl.save = function(newVal){ 
 
     \t $ctrl.onUpdate({number:newVal}) 
 
     }; 
 
    }, 
 
    template : ` 
 
    \t <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>