Template function does not interpolate component bindings

Question

I use 1.5 components, but I do not think this is important.

I am trying to make a single binding = between the parent controller and the selection area of ​​the child directives. The child's isolation area interpolates the binding literally; instead of vm.data , interpolating the data defined in the controller, literally vm.data is displayed as a string.

If I try to bind to one with @ , then again the "interpolated" value is expressed literally {{vm.data}} .

How can I get the string defined in the parent controller into the template of the child component?

 angular .module('app', []) .controller('Ctrl', function () { this.str = '<0>, blah, <1>'; }) .component('appComponent', { restrict: 'E', controller: 'Ctrl as vm', template: '<div><app-str appstr-data="{{vm.str}}"></app-str></div>' }) .component('appStr', { bindings: { appstrData: '@' }, restrict: 'EA', template: function($element, $attrs) { console.log($attrs.appstrData) return '<span>'+$attrs.appstrData+'</span>'; } }); 

https://plnkr.co/edit/VWVlhDbhP2uDRKtXJZdE?p=preview

Answer 1

If you want to get the string defined in the parent controller for rendering in the child, you should use interpolation {{appStr.appstrData}} only to use it inside the child template.

First of all, you need to change, you are returning the wrong template template from appStr .

Instead

 return '<span>'+$attrs.appstrData+'</span>'; 

Using

 return '<span>{{appStr.appstrData}}</span>'; 

Basically, you should use the component name to access the bindings component, for example, here is the name of the appStr component, so variable binding can be accessed using {{appStr.appstrData}}

Component

 .component('appStr', { bindings: { appstrData: '@' }, restrict: 'EA', template: function($element, $attrs) { return '<span>{{appStr.appstrData}}</span>'; //<--change here } }); 

Demo plunkr

---

Plunkr with binding =

---

Plunkr without bindings ( isolate: false ) means no isolated area