Angularjs 1.X 等效于 Angular 2 HostBinding 和 HostListener答案

【问题标题】：Angularjs 1.X equivalent to Angular 2 HostBinding and HostListenerAngularjs 1.X 等效于 Angular 2 HostBinding 和 HostListener
【发布时间】：2017-10-12 18:08:30
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript angularjs angular

【解决方案1】：

这是通过 $element 和 $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 应该在 1.x TypeScript 项目中密切复制 Angular 2+ API。

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

@HostBinding

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

@HostListener

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

【讨论】：

感谢您的回复，确认没有合适的等价物。
不客气。我将其称为适当的等价物。当您以这种方式编写代码并考虑迁移时，您可以轻松地从 1.x 转换为 2/4。同样，您可以将 ng-metadata 用于 1.x 代码，在迁移期间几乎不需要更改。