Question

我已经创建了一个完美无缺的指令。在将angular发送到1.5.0之后，我发现这个指令是使用新的.component()表示法编写的典型示例。

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

以下是一个简化示例：

＆＃13;

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;
    }
  }
});

＆＃13;

<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>

＆＃13;

我也尝试将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>

无法在AngularJS 1.5组件中使用指令

1 个答案: