javascript - Angularjs 1.X 相当于 Angular 2 HostBinding 和 HostListener

Question

我目前正在将一些 ng 1.X 元素指令迁移到 1.5“组件”格式。

我的指令都处于“replace : true”模式，其中很多在指令的根元素上都有诸如“ng-class”或“ng-click”之类的内容。

使用新的 .component() 格式，替换被强制为 false(就像在 ng2 中一样)。但是在 ng2 中，有 HostBinding 和 HostListener 之类的东西可以与组件的根元素进行交互。

ng1 组件中 HostBinding 的正确等价物是什么？

Answer 1

这是通过 $element 和 $scope Controller 本地依赖项完成的。

function SomeComponentController($scope, $element) {
  var self = this;

  $scope('$ctrl.foo', function (foo, oldFoo) {
    if (foo === oldFoo)
      return;

    // @HostBinding('bar') foo;
    self.bar = foo;

    // @HostBinding('attr.bar') foo;
    $element.attr('bar', foo);

    // @HostBinding('class.bar') foo;
    $element.toggleClass('bar', !!foo);
  });

  // @HostListener('click') onClick() {...}
  $element.on('click', function () {
    $scope.$evalAsync(self.onClick);
  });

  self.onClick = function () {...}.bind(self);
}

如果你想简化从 AngularJS 到 Angular 的 future 过渡，应该注意 ng-metadata应该在 1.x TypeScript 项目中紧密复制 Angular 2+ API。

它包含所述装饰器的实现，还提供了关于幕后发生的事情的注释:

@HostBinding

just creates $scope.$watch on provided controller property and changes the DOM by used type classname(toggleClass)/attribute(attr)/property(setPathValue)

@HostListener

manually registers event listeners on host element via .on(eventName) and executes provided method within listener callback wrapped with #scope.$applyAsync() to notify whole app about possible changes