visibleinvisibly visibleinvisibly - 1 year ago 108
AngularJS Question

How to access Angular 1.5 component property inside a template

I am trying to implement a simple component in Angular 1.5 I am trying to access binded(bound) properties 'compTitle' in component mycomponentheader'.

var mycomponentheader = {
bindings: {
'comptitle': '@mycomptitle'

I am passing the attribute value [compTitle="encryptedTitle"] in html markup in the view.

<mycomponentheader mycomptitle="encryptedTitle">
This is displayed for component content

wnen i try to use the similar mechanism in directive it works.
The jsfiddle for the same is @

i am aware of defining the template property as a function that can be injected with $element and $attrs ( template: function ($element, $attrs){ } in Angular 1.5) but i am looking for other methods.

Thanks in Advance

Answer Source

Have a look at the component's guide.

You'll see that, by default, the bindings are bound to the controller and they are under $ctrl, instead of this, since controllerAs is used.

This being said, just access comptitle from $ctrl, as such: $ctrl.comptitle.

Here is the working demo.

Note: on the component's guide you'll see a list with the main differences between components and directives. You'll notice that some of the mycomponentheader properties aren't needed as they don't exist for a component. These properties include: restrict (it already defaults to E) and replace (which is unsupported).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download