I'd like to be able to set custom attributes on the host element for Angular 1.5 ponents.

Why?

• I want to add a class to a ponent so I can style it. For example, if a ponent's parent has display: flex set, I'll likely want to set the flex property on the ponent.
• It's often useful to conditionally apply a class depending on a ponent's state.
• In certain circumstances, I'd like to use ARIA attributes to make a ponent more accessible.

Here's a simplified example of what I'd like to do (it obviously doesn't work, but I'm looking for something similar):

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

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

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

It looks like Angular 2.0 supports this feature, but I don't see anything in the docs about supporting it in 1.5. Is there a way to acplish this for those of us still stuck using ponent?

In the past, I would have simply used replace: true to solve this problem, but that's been deprecated and isn't even available for ponent.

I'd like to be able to set custom attributes on the host element for Angular 1.5 ponents.

Why?

• I want to add a class to a ponent so I can style it. For example, if a ponent's parent has display: flex set, I'll likely want to set the flex property on the ponent.
• It's often useful to conditionally apply a class depending on a ponent's state.
• In certain circumstances, I'd like to use ARIA attributes to make a ponent more accessible.

Here's a simplified example of what I'd like to do (it obviously doesn't work, but I'm looking for something similar):

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

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

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

It looks like Angular 2.0 supports this feature, but I don't see anything in the docs about supporting it in 1.5. Is there a way to acplish this for those of us still stuck using .ponent?

In the past, I would have simply used replace: true to solve this problem, but that's been deprecated and isn't even available for .ponent.

• javascript
• angularjs

• 2 .ponent is not made for dom manipulation. If you want to control html elements you should use a directive instead (link function) – gyc Commented Jun 17, 2016 at 9:00

1 Answer 1

As you mention, it is not directly possible as you describe. An attributes property would be usefull, but does not exist as of yet.

A possible work-around would be to use $element inside your controller. This passes a jQuery element as a dependency, so you can add attributes as needed.

angular
    .module('myComponent', [])
    .ponent('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.'
    });

The <myComponent> element would now have a hello-world class and a aria-hidden attribute. It is even possible to use bindings, as described above with greeting.

The angular ponent definition is just a wrapper around normal directives.