根据范围变量为 Angular 指令提供模板

Question

我是 Angular 的新手，我需要使用 svg 文件的可选部分来实现交互式地图。

有我的控制器，以及整个 svg 地图和部分区域的指令。

ColorPicker 控制器

app.controller("ColorPicker", function($scope, $timeout, appConfig) {
$scope.colors = [];
$scope.currentColorSet = 0;
$scope.svgTemplateUrl = appConfig.arSvg[$scope.$parent.roomType.id][$scope.$parent.roomStyle.id]+'over.svg'

$scope.alertColor = function(color) {
    console.log(color);
}


});

地图指令

app.directive('svgMap', ['$compile', function ($compile) {
return {
    restrict: 'A',
    templateUrl: 'models/livingrooms/Livingroom_01/over.svg',
    link: function (scope, element, attrs) {

        var svg = $(element).find('svg');
        svg.removeAttr('xmlns:a');
        svg.attr('width', '869px');
        svg.attr('height', '489px');
        element.append(svg);

        var regions = element[0].querySelectorAll('path');

        angular.forEach(regions, function (path, key) {
            var regionElement = angular.element(path);
            regionElement.attr("region", "");
            $compile(regionElement)(scope);
        });
    },
}
}]);

区域指令

app.directive('region', ['$compile', function ($compile) {
return {
    restrict: 'A',
    scope: true,
    link: function (scope, element, attrs) {
        scope.elementId = element.attr("id");
        scope.stroke = '';
        scope.regionClick = function () {
            console.log(scope.elementId);
        };
        scope.setStroke = function () {
            scope.stroke = '#e5514e';
        };
        scope.removeStroke = function () {
            scope.stroke = '';
        };
        element.attr("ng-click", "regionClick()");
        element.attr("ng-attr-stroke", "{{stroke}}");
        element.attr("ng-mouseenter", "setStroke()");
        element.attr("ng-mouseleave", "removeStroke()");
        element.removeAttr("region");
        $compile(element)(scope);
    }
}
}]);

我需要的是动态加载 SVG 文件作为模板并根据范围变量 $scope.svgTemplateUrl 编译它和所有它的区域

如果 templateUrl 是一个常量字符串，现在一切正常，如何使其动态？

Answer 1

好的，如果你想动态加载templateUrl，那么可以通过向它传递回调来完成。

templateUrl: function(element,attrs) {
             return attrs.templateUrl;
           }

现在在使用指令时-

<svgMap template-url="models/livingrooms/Livingroom_01/over.svg"><svgMap>

另一种方法是定义一个范围指令，如

app.directive('svgMap', ['$compile', function ($compile) {
return {
    restrict: 'A',
    scope: {
        templatecontenturl: '='
    },
    templateUrl: templatecontenturl,
    link: function (scope, element, attrs) {

    },
}
}]);

像这样使用它

<svgMap templatecontenturl="svgTemplateUrl"><svgMap>

请参阅http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope 在指令之间传递范围变量。