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

Question

I am newbie for Angular, and I need to implement interactive map with selectable parts of svg file.

There is my controller, and directives for whole svg map and partial regions.

ColorPicker controller

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


});

Map directive

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

Region directive

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

What I need is to dynamically load SVG file as template and compile it and all it regions based on scope variable $scope.svgTemplateUrl

All working fine now if templateUrl is a constant string, how to make it dynamic?

Answer 1

Ok if you want to load templateUrl dynamically then it can be done like this by passing a callback to it.

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

Now while using the directive-

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

alternative way is to define a scope directive like

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

    },
}
}]);

Use it like

<svgMap templatecontenturl="svgTemplateUrl"><svgMap>

See the http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope on scope variable passing between directives.