Kann keine Richtlinie in AngularJS 1.5 Komponente

Question

erfordern Ich habe eine Direktive erstellt, die tadellos funktioniert. Jetzt, nachdem ich angular zu 1.5.0 gestoßen habe, dachte ich, dass diese Direktive ein typisches Beispiel dafür ist, was mit der neuen Notation .component() geschrieben werden könnte.

Aus irgendeinem Grund die require Eigenschaft scheint nicht mehr zu funktionieren.

Das Folgende ist ein vereinfachtes Beispiel:

angular.module('myApp', []) 
 

 
.component('mirror', { 
 
    template: '<p>{{$ctrl.modelValue}}</p>', 
 
    require: ['ngModel'], 
 
    controller: function() { 
 
    var vm = this; 
 
    var ngModel = vm.ngModel; 
 
    
 
    ngModel.$viewChangeListeners.push(onChange); 
 
    ngModel.$render = onChange; 
 

 
    function onChange() { 
 
     vm.modelValue = ngModel.$modelValue; 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <input ng-model="someModel"/> 
 
    <mirror ng-model="someModel"></mirror> 
 
</div>

Ich habe auch versucht require als einfache Zeichenfolge mit:

... 
require: 'ngModel' 
... 

und als Objekt:

... 
require: { 
    ngModel: 'ngModel' 
} 
... 

Ich habe für $compile und component bei der Dokumentation sah, aber ich kann es nicht zur Arbeit zu kommen scheinen.

Wie kann ich andere Direktiven-Controller in einer AngularJS 1.5-Komponente benötigen?

Answer 1

In der Komponentensyntax von Angular 1.5 haben Sie keinen Zugriff auf die erforderlichen Controller, bis die Lebenszyklusmethode $onInit der Komponente aufgerufen wird. Also müssen Sie Ihre Initialisierung dorthin verschieben, hier ist eine funktionierende Version Ihres Snippets, wo ich die $onInit Funktion hinzugefügt habe.

angular.module('myApp', []) 
 

 
.component('mirror', { 
 
    template: '<p>{{$ctrl.modelValue}}</p>', 
 
    require: { 
 
    ngModel: 'ngModel', 
 
    }, 
 
    controller: function() { 
 
    var vm = this; 
 
    
 
    vm.$onInit = function() { 
 
     var ngModel = vm.ngModel; 
 
     ngModel.$viewChangeListeners.push(onChange); 
 
     ngModel.$render = onChange; 
 
    }; 
 
    
 
    function onChange() { 
 
     vm.modelValue = vm.ngModel.$modelValue; 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <input ng-model="someModel"/> 
 
    <mirror ng-model="someModel"></mirror> 
 
</div>