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

Answer 2

ng-include包含内容异步，因此当指令的link函数运行时，ng-include（包括svg）的DOM元素仍然不是那里。

幸运的是，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\'"

或者更好 - 可以在link函数和分配给ng-include的变量中构建路径。

AngularJS指令，模板和ng-include

2 个答案: