How to access Angular 1.5 component property inside a template

Question

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">
    <div>    
      This is displayed for component content
    </div>
  </mycomponentheader>

wnen i try to use the similar mechanism in directive it works. The jsfiddle for the same is @ https://jsfiddle.net/visibleinvisibly/4n7vsas7/

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 1

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).