Angular 1.5组件主机元素属性

我希望能够为Angular 1.5组件的主机元素设置自定义属性。Angular 1.5组件主机元素属性

为什么？

我想添加一个类到一个组件，所以我可以设计它。例如，如果某个组件的父级已设置display: flex，则可能需要在该组件上设置flex属性。
根据组件的状态有条件地应用类通常很有用。
在某些情况下，我想使用ARIA属性来使组件更易于访问。

这里是想我做一个简单的例子（它显然是行不通的，但是我正在寻找类似的东西）：

angular.module("app").component('hello', { 

    attributes() { 
    return { 
     class: "hello " + (this.greeting ? "hello--visibile" : ""), 
     data-greeting: this.greeting 
    } 
    }, 

    bindings: { 
    greeting: "<", 
    } 
})

它看起来像角2.0 supports this feature，但在文档中我没有看到1.5中支持它的任何内容。有没有办法做到这一点，我们这些人仍然坚持使用.component？

过去，我只是简单地使用replace: true来解决这个问题，但是这已被弃用，甚至不可用于.component。

来源

2016-06-17 LandonSchropp

。组件不是用于dom操作的。如果你想控制html元素，你应该使用一个指令，而不是（链接功能） – gyc

正如你所说，它不是直接可能的，因为你描述。属性属性将是有用的，但目前还不存在。

可能的解决方法是在控制器内部使用$element。这会传递一个jQuery元素作为依赖项，所以您可以根据需要添加属性。

angular 
    .module('myComponent', []) 
    .component('myComponent', { 
     bindings: { 
       greeting: '<' 
     }, 
     controller: function($element) { 
       $element.addClass('hello-world'); 
       $element.attr('aria-hidden', true); 
       $element.data('my-greeting', this.greeting); 
     }, 
     template: 'Define your template here.' 
    });

的<myComponent>元素现在将有一个hello-world类和aria-hidden属性。甚至可以使用绑定，如上所述greeting。

角度分量定义为just a wrapper around normal directives。

来源

2016-06-22 08:33:03

感谢您的答复！我没有意识到我可以访问组件内部的'$ element'。我可能会写一个快速的可重用的助手来抓取我的属性并将其附加到元素。 – LandonSchropp

让我们假设你在一个项目的所有组件上使用这个。有什么缺点吗？也许一些性能损失？ – Mackelito

如何动态设置主机元素样式（例如宽度或高度）？ – Mikemike

Angular 1.5组件主机元素属性

回答

相关问题