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。

基于范围变量为Angular指令提供模板

1 个答案: