javascript - template function not interpolating component bindings -

i'm using 1.5 components, don't think matters though.

i'm trying single = binding between parent controller , child directive isolate scope. child isolate scope interpolating binding literally; instead of vm.data interpolating data defined in controller, it's coming out literally vm.data string.

if try 1 way binding @ then, again, "interpolated" value results in {{vm.data}} literally.

how can string defined in parent controller child component's template?

angular   .module('app', [])   .controller('ctrl', function () {     this.str = '<0>, blah, <1>';   })   .component('appcomponent', {     restrict: 'e',     controller: 'ctrl 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

if wanted string defined in parent controller render in child should use {{appstr.appstrdata}} interpolation use inside child template.

very first thing need change is, returning incorrect template appstr template.

instead of

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

use

return '<span>{{appstr.appstrdata}}</span>'; 

basically should use component name have access component bindings, here component name appstr that's why binding of variable accessible using {{appstr.appstrdata}}

component

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

demo plunkr

---

plunkr = binding

---

plunkr no bindings (isolate: false) means no isolated scope