AngularJS指令，模板和ng-include

Question

所以我想創建一個指令，其中包含一個ng-include。 該指令目前看起來是這樣的：

.directive('kdTest', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      kit: '=kdTest', 
      garment: '=kdGarment' 
     }, 
     template: '<div></div>', 
     link: function (scope, element, attrs) { 
      console.log(scope.kit); 
      console.log(scope.garment); 
     } 
    } 
}); 

我想要做的是改變模板看起來更像是這樣的：

.directive('kdTest', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      kit: '=kdTest', 
      garment: '=kdGarment' 
     }, 
     template: '<div ng-include="'/assets/garments/' + garment.slug + '.svg'"></div>', 
     link: function (scope, element, attrs) { 
      console.log(scope.kit); 
      console.log(scope.garment); 
     } 
    } 
}); 

但你可以看到，單引號會導致我的問題。 有人可以幫我解決這個問題嗎？

此外，我需要能夠從指令中訪問元素。

更新1

所以，我改變了我的指令是：

.directive('kdTest', function() { 
    var colours, 
     design, 
     garment; 

    // Function to show our selected design 
    var showDesign = function (element) { 

     // Get our image 
     var svg = element.find('svg'); 

     console.log(svg.length); 

     // If we have an image 
     if (svg.length) { 

      ///-- removed for brevity --// 
     } 
    }; 

    return { 
     restrict: 'A', 
     scope: { 
      kit: '=kdTest', 
      garment: '=kdGarment' 
     }, 
     template: '<div ng-include="svgPath"></div>', 
     link: function (scope, element, attrs) { 

      // Attach our scope to our global variables 
      colours = scope.colours; 
      design = scope.design; 
      garment = scope.garment; 

      // Create our svgPath 
      scope.svgPath = 'assets/garments/' + scope.garment.slug + '.svg'; 

      // Show our selected design 
      showDesign(element); 
     } 
    } 
}); 

所以在我的功能showDesign的執行console.log（svg.length）返回0 如何我可以得到它實際上看到SVG？

Answer 1

ng-include包括內容asyncronously，所以當該指令link功能運行時，的DOM元素ng-include（包括svg）仍然不存在。

幸運的是，ng-include提供onload事件，所以你可以這樣做：

template: '<div ng-include="svgPath" onload="svgLoaded()"></div>', 
link: function(scope, element){ 
    // rest of your link function... 

    scope.svgLoaded = function(){ 
    // Show our selected design 
    showDesign(element); 
    } 
} 

編輯：（完成答案）：

內行情應該被轉義（如建議另一個答案），如下所示：

ng-include="\'/some/path\'" 

或者更好 - 路徑可以在t他link函數和變量分配給ng-include。

Answer 2

簡單。退出報價。

替換：

template: '<div ng-include="'/assets/garments/' + garment.slug + '.svg'"></div>', 

有了：

template: '<div ng-include="\'/assets/garments/\' + garment.slug + \'.svg\'"></div>', 

或者：

template: "<div ng-include=\"'/assets/garments/\' + garment.slug + '.svg'\"></div>', 

---

或者更好的是，就在模板鏈接到HTML文件：

templateUrl: "some/html/file.html", 

包含有：

<div ng-include="garmentPath"></div> 

，並設置路徑變量，在link功能：

scope.garmentPath = '/assets/garments/' + scope.garment.slug + '.svg'; 

---

要訪問SVG元素，你可能想正如我所建議的那樣使用html文件。

<div id="mySvg" ng-include="garmentPath"></div> 

然後你可以使用jQuery獲取元素：$('#mySvg svg');
或本機JS：document.getElementById("mySvg").getElementsByTagName("svg")