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中的属性仍然在指令中设置角度代码仍然没有翻译范围。我高度，我通过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文档here中找到;检查模板扩展指令指南

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

1 个答案: