Binding-Ausgabe über verschachtelte Komponenten funktioniert nicht

Question

Ich habe mir heute mit diesem Problem den Kopf kratzen. Bitte. werfen Sie einen Blick auf den folgenden Code. Können Sie erklären, warum Angular diesen Fehler nach dem Auslösen der onUpdate() -Methode aus dem Komponentenbereich der zweiten Ebene ausgibt?

TypeError: Cannot use 'in' operator to search for '$ctrl' in 99

Vielen Dank!

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

Da Sie einen Ausdruck Bindung (&) definiert sind, müssen Sie explizit die Nummer wenn Sie mit einem JSON nennen enthalten wollen es in der HTML zu binden, wie data-on-update="$ctrl.onUpdate(number)"

In der Tat, Angular müssen verstehen, was diese Zahl in Ihrem HTML ist, und , da es nicht Teil Ihres Bereichs ist, müssen Sie so genannte "Einheimische" zu Ihrem Anruf hinzufügen, indem Sie:

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

Answer 2

Versuchen Sie, diese

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>