如何在 Angular 1.5 组件中选择元素？

【问题标题】：How to select element inside Angular 1.5 component?如何在 Angular 1.5 组件中选择元素？
【发布时间】：2017-01-08 07:07:52
【问题描述】：

对于component，我不能再像以前在其父 -- 指令中那样引用Elem 或Attr，而是将它们作为link 或post 中的参数。

像我以前在指令中那样选择元素的最佳方法是什么？它改变了应该如何做的方式吗？

为什么它没有记录在 Angular 1.5x 的组件文档中？

【问题讨论】：

您可以像在传统指令的控制器中那样引用它。但是如果需要访问元素，那么component 可能首先不是最佳选择。 directive 仍然占有一席之地。

标签： javascript angularjs angularjs-directive angularjs-components

【解决方案1】：

您可以通过注入 $element 依赖项在组件控制器中执行相同的操作。但是在控制器负载$element 上没有编译DOM。

对于这种情况，您可以使用 Angular 1.5 组件生命周期，就像我们有 $postLink() 一样，它的工作方式与 Angular 1 指令的 postLink/link 功能相同。

为了访问属性，您在控制器中注入 $attrs 服务。

组件

myMod.component('myComponent', {
  template: '<h1>Home</h1>',
  controller: function($element) {
    this.test = 'hello world';
    this.$postLink = function(){
      //here you have compiled DOM
      //you can play with element here.
      console.log("Post LInk DOM", $element);
    }
    console.log("Initial DOM", $element);
  }
});

【讨论】：