Nie można wymagać dyrektywy w komponencie AngularJS 1.5

Question

Stworzyłem dyrektywę, która działa doskonale. Teraz po wpadnięciu angular do 1.5.0, stwierdziłem, że ta dyrektywa jest typowym przykładem tego, co można napisać przy użyciu nowej notacji .component().

Z jakiegoś powodu właściwość require już nie działa.

Poniżej przedstawiono uproszczony przykład:

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>

że próbował również za pomocą require jako prostego łańcucha:

... 
require: 'ngModel' 
... 

i jako obiekt:

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

Przyjrzałem się dokumentom dla $compile i component, ale nie mogę sprawić, żeby działało.

Jak mogę wymagać innych kontrolerów dyrektyw w komponencie AngularJS 1.5?

Answer 1

W składni komponentu Angular 1.5, nie masz dostępu do wymaganych kontrolerów, dopóki nie zostanie wywołana metoda cyklu życia komponentu $onInit. Musisz przenieść tam swoją inicjalizację, oto działająca wersja Twojego fragmentu, w którym dodałem funkcję $onInit.

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>