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

但如您所见，单引号会给我带来麻烦。有人可以帮我解决这个问题吗？

另外，我需要能够从指令内部访问 svg 元素。

更新 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

简单。转义引号。

替换:

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

包含include:

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