AngularJS将参数传递给指令的模板

Question

I have this basic set

HTML

<linear-chart chartData="myArray" height="666"> </linear-chart>

JS ...

 ... app.directive('linearChart', function($window){ return{ restrict:'EA', template:"<svg width='850' height={{myHeight}} ></svg>", ******-> if I hard code height with number all great but when trying to pass as arg it goes kapput with/without the quotes link: function(scope, elem, attrs){ var salesDataToPlot=scope[attrs.chartData]; scope.myHeight = attrs.height; console.log('h passed=', scope.myHeight); *****-> prints out the proper value 666 ... 

when try to pass the height as an argument I get this Error: attribute height: Expected length, "{{myHeight}}".

Something so innocent but I cannot find a similar situation/answer or am I passing it the value to the template the wrong way???

UPDATE

Thanks bhantol and Kristiyan although the properties in Chrome were being set still in the directive the angular code was still not translating the scope.myHeight, I stepped thru the Chrome debugger and after a few trials I found out a work around and it is here

 ... template: function(scope,elem) { var myTemp = '<svg width="850" height="' + elem.height + '"></svg>'; return myTemp; }, ... 

Answer 1

You need to change your double quotes to single quotes on the following like from:

template:"<svg  width='850' height={{myHeight}} ></svg>",

to:

template:'<svg  width='850' height={{myHeight}} ></svg>',

That way Angular takes the whatever value myHeight holds rather than taking myHeight as a string. More information can be found in the AngularJS Documentation here ; check the Template-expanding directive guide