javascript - 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}}].

这个问题也不是第一个绑定(bind)所独有的。如果我删除第一行，y1 也会出现同样的问题。

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

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

我是否错过了有关 Angular 属性指令如何与 SVG 配合使用的一些边缘情况？

Answer 1

x1 是双向绑定(bind)变量。您能否检查一下 triad-line 指令的使用位置，属性 x1 不包含 {{}}。

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

应该是

<triad-line x1="someScopeVariable">