Директивы, шаблоны и ng-include AngularJS

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); 
     } 
    } 
}); 

, но как вы можете видеть, одиночные кавычки собираются вызвать мне проблемы. Может кто-нибудь помочь мне исправить это?

Кроме того, мне нужно иметь доступ к элементу svg внутри директивы.

Update 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 включает содержание асинхронного и поэтому, когда 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); 
    } 
} 

EDIT: (чтобы завершить ответ):

внутренние кавычки должны быть экранированы (как это было предложено в другой ответ), например:

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")