添加到指令中的元素存在但不可見

我試圖在使用圖像作爲背景的角度指令內使用SVG，然後在其上繪製它。添加到指令中的元素存在但不可見

我遇到的問題是繪製的元素被創建並明顯附加，但它們不顯示。我可能錯誤地使用了追加功能，但我不知道爲什麼。

這是我的指令

var app = angular.module("app",[]); 
app.directive("myDir",function(){ 
    return { 
     restrict: 'E', 
     replace: true, 
     link: function (scope, iElement, iAttrs) { 
      var svg = angular.element('<circle cx="10" cy="10" r="50"/>'); 
      iElement.append(svg); 

     }, 
     template:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="200"><image x="0" y="0" width="400" height="200" xlink:href="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"/></svg>' 


    } 
});

，這裏是一個fiddle它。

非常感謝。

來源

2015-05-26 David

看起來像以前一樣添加它像你需要注射'iElement.append（$編譯（SVG之前編譯元素）（）;' –

我讀到了，但它似乎沒有任何區別 – David

您正在html命名空間而不是SVG命名空間創建一個圓形元素。你必須調試angularjs代碼來找出原因。 –

好的，我仍然不知道爲什麼原始代碼不起作用，但我找到了一種方法使其工作，至少在有人提供關於原始代碼的解釋之前。

這是我用過的var svg = angular.element('<circle cx="10" cy="10" r="50"/>');

var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); 
circle.setAttribute("cx",10); 
circle.setAttribute("cy",10); 
circle.setAttribute("r",10);

，而不是再搭配iElement.append(circle);

來源

2015-05-26 07:35:19 David

檢查這個答案爲jquery.append不工作與svg元素http://goo.gl/rl9yz –

添加到指令中的元素存在但不可見

回答

相關問題