Không thể yêu cầu chỉ thị trong AngularJS 1.5 thành phần

Question

Tôi đã tạo một chỉ thị hoạt động hoàn toàn tốt. Bây giờ sau khi chạm angular đến 1.5.0, tôi đã tìm thấy chỉ thị này là một ví dụ điển hình về những gì có thể được viết bằng cách sử dụng ký hiệu .component() mới.

Vì lý do nào đó, tài sản require dường như không còn hoạt động nữa.

Sau đây là một ví dụ đơn giản:

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>

Tôi cũng đã cố gắng sử dụng require như là một chuỗi đơn giản:

... 
require: 'ngModel' 
... 

và như một đối tượng:

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

Tôi đã xem tài liệu cho $compile và component, nhưng tôi dường như không làm cho tài liệu hoạt động.

Tôi có thể yêu cầu các bộ điều khiển chỉ thị khác trong thành phần AngularJS 1.5 như thế nào?

Answer 1

Trong cú pháp thành phần của Angular 1.5, bạn không có quyền truy cập vào các bộ điều khiển bắt buộc cho đến khi phương thức vòng đời $onInit của thành phần được gọi. Vì vậy, bạn cần phải di chuyển initialisation của bạn vào đó, đây là một phiên bản làm việc của đoạn mã của bạn, nơi tôi đã thêm chức năng $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>