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

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

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

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

ng1 组件中 HostBinding 的正确等效项是什么？

这是用完成的$element and $scope控制器本地依赖项。

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 的未来过渡，应该注意的是ng-metadata https://github.com/ngParty/ng-metadata应该在 1.x TypeScript 项目中紧密复制 Angular 2+ API。

它包含所述装饰器的实现，并且还提供了有关幕后情况的注释：

@HostBinding http://@HostBinding

只需在提供的控制器属性上创建 $scope.$watch 并通过使用类型 classname(toggleClass)/attribute(attr)/property(setPathValue) 更改 DOM

@HostListener https://hotell.gitbooks.io/ng-metadata/content/docs/api/core/decorator.html#hostlistener

通过 .on(eventName) 在主机元素上手动注册事件侦听器，并在用 #scope.$applyAsync() 封装的侦听器回调中执行提供的方法，以通知整个应用程序可能发生的更改