Angular SVG指令意外令牌

Question

我正在创建一个Angular指令，该指令将SVG线元素包装为较大组件的一部分。

我开始将整个SVG的组成部分分成较小的部分，并且line指令引发语法错误。

/**                                                                                                                                                
 * @name triadLine                                                                                                                                 
 * @type directive                                                                                                                                 
 * @overview                                                                                                                                       
 */                                                                                                                                                
.directive('triadLine', function(TriadConfig) {                                                                                                    
  return {                                                                                                                                         
    restrict: 'E',                                                                                                                                 
    replace: true,                                                                                                                                 
    scope: {                                                                                                                                       
      x1: '=',                                                                                                                                     
      y1: '=',                                                                                                                                     
      x2: '=',                                                                                                                                     
      y2: '='                                                                                                                                      
    },                                                                                                                                             
    link: function(scope) {                                                                                                                        
      scope.config = TriadConfig;                                                                                                                  
    },                                                                                                                                             
    template:                                                                                                                                      
    "<line " +                                                                                                                                     
        "ng-attr-x1='{{x1}}'" +                                                                                                                    
        "ng-attr-y1='{{y1}}'" +                                                                                                                    
        "ng-attr-x2='{{x2}}'" +                                                                                                                    
        "ng-attr-y2='{{y2}}'" +                                                                                                                    
        "style='stroke:{{config.line.stroke}}'>" +                                                                                                 
    "</line>"                                                                                                                                      
};

编译指令时，Angular会引发以下错误：

Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 3 of the expression [0 {{x1}}] starting at [{{x1}}].

这个问题也不是第一个绑定所独有的。 如果删除第一行，则y1会引发相同的问题。

如果删除ng-attr-行，则可以看到这些值已正确传递。

{
  ...
  config: Object
  x1: 300
  x2: 300
  y1: 80.3847577293368
  y2: 340.1923788646684
  ...
}

我是否错过了一些有关Angular属性指令如何与SVG一起使用的案例？

Answer 1

x1是双向绑定变量。 能否请您检查在哪里使用了triad-line伪指令，属性x1不包含{{}}。

<triad-line x1="{{someScopeVariable}}">

应该

<triad-line x1="someScopeVariable">