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

Question

我有这个基本设置

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

尝试将高度作为参数传递时，出现以下错误：属性高度：预期长度“ {{myHeight}}”。

如此纯真的东西，但我找不到类似的情况/答案，或者我是否以错误的方式将其值传递给模板？？？

更新

感谢bhantol和Kristiyan，尽管Chrome中的属性仍在指令中设置，但角度代码仍未转换范围。myHeight，我通过Chrome调试器，经过几次试验后，我找到了解决方法，它就在这里

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

Answer 1

您需要将双引号更改为单引号，例如：

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

至：

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

这样，Angular将使用myHeight持有的任何值，而不是将myHeight作为字符串。 更多信息可以在这里的AngularJS文档中找到 ； 查看模板扩展指令指南