AngularJS 1.5 bileşeninde yönerge gerektirilemiyor

Question

Mükemmel bir şekilde çalışan bir yönerge oluşturdum. angular'un 1.5.0 numarasına çarpmasından sonra, bu yönerge, yeni .component() notasyonu kullanılarak nelerin yazılabileceğine dair tipik bir örnek olduğunu düşündüm.

Bazı nedenlerle, require özelliği artık çalışmıyor gibi görünüyor.

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>

Ayrıca basit bir dizge olarak require kullanarak güvenilir:

aşağıdaki basitleştirilmiş bir örnek

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

:

... 
require: 'ngModel' 
... 

bir nesne olarak

$compile ve component belgelerine baktım ama işe yaramıyor gibi görünmüyor.

AngularJS 1.5 bileşeninde başka yönerge denetleyicilerine nasıl gereksinim duyarım?

Answer 1

Açısal 1.5 bileşen sözdiziminde, bileşenin $onInit yaşam döngüsü yöntemi çağrılana kadar gerekli denetleyicilere erişiminiz yoktur. Bu nedenle, ilklendirmeyi oraya taşımanız gerekiyor, burada snippet'in çalışan bir sürümü var. Burada $onInit işlevini ekledim.

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>