Question

我是否已经不再可以将Angular指令用作“HTML装饰器”，因为我已经调用它们了？

我发现这种模式在Angular 1.x中非常有价值，可以将遗留应用程序迁移到单页应用程序，方法是首先构建一组指令，这些指令可以为服务器生成的标记添加功能。对于Angular团队来说，消除这种功能似乎是一种疏忽。

一个受控的例子：

有一个jQuery插件，用于选择更漂亮的选择框。在1.x中，我将在从服务器返回的页面上执行以下操作。

HTML：

<select chosen-select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

JS

app.directive('chosenSelect', [
    function() {
        return {
            restrict: 'AE',
            link: function(scope, element, attributes) {
                $(element).chosen();
            }
        };
    }
]);

这将在服务器生成的HTML上执行所选插件，除了定义ng-app之外，我不需要对页面进行任何实际更改。这种指令风格是否可以使用Angular 2 +？

完成

由于

Answer 1

您也可以这样做：

import {Directive, ElementRef, OnInit} from '@angular/core';

declare var $: any;

@Directive({selector: '[promoChosenSelect]'})
export class ChosenSelectDirective  implements OnInit{
  constructor(private el: ElementRef) {
  }

  ngOnInit(): void {
    $(this.el.nativeElement).chosen();
  }

}

模块中的

：

@NgModule({
  imports: [],
  exports: [
    ChosenSelectDirective
  ],
  declarations: [
    ClickOutsideDirective,
  ],
  entryComponents: [],
  providers: []
 })
 export class SharedModule {
 }

这里是html：

 <select promoChosenSelect>
    <option>1</option>
   <option>2</option>
    <option>3</option>
   <option>4</option>
 </select>

将AngularJS指令迁移到Angular 2.x +指令作为HTML装饰器

1 个答案: