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是双向绑定变量。你能否检查一下三元线指令的使用位置x1不包含{{}}。

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

应该是

<triad-line x1="someScopeVariable">

Angular SVG指令意外令牌

1 个答案: