Невозможно потребовать директивы в компоненте AngularJS 1.5

Question

Я создал директиву, которая работает отлично. Теперь после bumping angular до 1.5.0 я решил, что эта директива является типичным примером того, что можно было бы написать с использованием новой нотации .component().

По какой-то причине свойство require больше не работает.

Ниже приведен упрощенный пример:

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>

Я также попытался с помощью require в виде простой строки:

... 
require: 'ngModel' 
... 

и в качестве объекта:

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

Я просмотрел документы для $compile и component, но я не могу заставить его работать.

Как я могу использовать другие контрольные контроллеры в компоненте AngularJS 1.5?

Answer 1

В синтаксисе компонента Angular 1.5 у вас нет доступа к требуемым контроллерам до тех пор, пока не будет вызван метод жизненного цикла компонента $onInit. Поэтому вам нужно переместить вашу инициализацию туда, вот рабочая версия вашего фрагмента, где я добавил функцию $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>