angularjs - 无法在 AngularJS 1.5 组件中要求指令

Question

我创建了一个运行良好的指令。现在撞后angular至 1.5.0 ，我认为该指令是使用新 .component() 可以编写的内容的典型示例。符号。

出于某种原因，require属性(property)似乎不再起作用。

下面是一个简化的例子:

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 组件中要求其他指令 Controller ？

Answer 1

在 Angular 1.5 的组件语法中，在组件的 $onInit 之前，您无法访问所需的 Controller 。生命周期方法被调用。所以你需要将你的初始化移到那里，这是你的代码片段的工作版本，我在其中添加了 $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>