Question

我用angular.js

构建了一个带有交互式SVG地图的应用程序

整个应用程序由控制器控制，svg包含在一个指令中，而svg中的每个<path>也是一个部分指令。
当用户点击墙上时，<path> id会被存储在自定义服务中，然后当用户选择颜色时，我需要使用该颜色填充此墙。问题是我无法在控制器中访问指令。我也无法与指令共享一个范围，因为我的控制器中有多个嵌套指令，并希望通过id访问它们。

也许有设计错误？我该如何实现这个工作流程？

我的控制器，服务和指令代码

ColorPicker控制器

app.controller("ColorPicker", function($scope, $timeout, appConfig, ColorService) {
$scope.colors = [];
$scope.currentColorSet = 0;
$scope.svgTemplateUrl = appConfig.arSvg[$scope.$parent.roomType.id][$scope.$parent.roomStyle.id] + 'over.svg';
$scope.maxColorSet = Math.max.apply(Math, jsondata.roomtype[$scope.$parent.roomType.id].data.roomstyle[$scope.$parent.roomStyle.id].colors.map(function(color) {
    return color.color.group;
}));
$scope.sliderConfig = {
    min: 0,
    max: $scope.maxColorSet,
    step: 1     
} 
$scope.emptyColors = ( ColorService.getColors().length === 0 );
$scope.currentProps = {};

$scope.applyColor = function(color) {
    console.log($scope.currentProps);
    //**here I need to set fill with selected color to selected directive**
}

$scope.prevColorSet = function(){
    if($scope.currentColorSet > 0) {
        $scope.currentColorSet--;
        generateColorSet($scope.currentColorSet);
    } 
}

$scope.nextColorSet = function(){
    if($scope.currentColorSet < $scope.maxColorSet) {
        $scope.currentColorSet++;
        generateColorSet($scope.currentColorSet);
    } 
}

generateColorSet = function(setIndex){
    $scope.colors = [];
    for(var i = 0; i < jsondata.roomtype[$scope.$parent.roomType.id].data.roomstyle[$scope.$parent.roomStyle.id].colors.length; i++){
        if(jsondata.roomtype[$scope.$parent.roomType.id].data.roomstyle[$scope.$parent.roomStyle.id].colors[i].color.group == setIndex) {
            $scope.colors.push(jsondata.roomtype[$scope.$parent.roomType.id].data.roomstyle[$scope.$parent.roomStyle.id].colors[i].color)
        }
    }
}
generateColorSet($scope.currentColorSet);

$scope.$watch("currentColorSet", function(newValue, oldValue) {
    generateColorSet($scope.currentColorSet);
});

});

整个SVG的指令

app.directive('svgmap', ['$compile', function ($compile) {
return {
    restrict: 'A',
    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','ColorService','$timeout', function ($compile, ColorService, $timeout) {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        scope.properties = {
            elementId : element.attr("id"),
            stroke: '',
            fill: '#fff'
        };
        scope.regionClick = function () {
            scope.currentProps = scope.properties;
            if(ColorService.selectedRegion != scope.properties.elementId) {
                scope.properties.stroke = '#e5514e';
                ColorService.selectedRegion = scope.properties.elementId;
            } else {
                scope.properties.stroke = '';
                ColorService.selectedRegion = '';

            }
            console.log('click: ' + scope.properties.elementId + ' : ' + scope.properties.stroke);
        };
        scope.setStroke = function () {
            scope.stroke = '#e5514e';
        };
        scope.removeStroke = function() {
            if(ColorService.selectedRegion != scope.properties.elementId) {
                scope.properties.stroke = '';
            }
            //console.log('enter: ' + scope.elementId + ' : ' + scope.stroke);

        };
        scope.removeColor = function() {
            console.log('removed');
            scope.properties.fill = '#fff';
            ColorService.remove(scope.properties.elementId);
        };
        ColorService.getColors().forEach(function(item) {
            if(item.id === scope.properties.elementId) {
                scope.properties.fill = item.info.val;
            }
        });
        element.attr("ng-click", "regionClick()");
        element.attr("ng-attr-stroke", "{{properties.stroke}}");
        element.attr("ng-attr-fill", "{{properties.fill}}");
        element.attr("ng-mouseenter", "setStroke()");
        element.attr("ng-mouseleave", "removeStroke()");
        element.attr("ng-right-click", "removeColor()");
        element.after('<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />');
        element.removeAttr("region");
        $compile(element)(scope);
    }
}
}]);

如何从控制器更改所选指令的属性

0 个答案: