Question

所以我一直在关注如何使用Angular制作交互式SVG地图的本教程。我正处于这样的地步，我正试图自己动手并让它去做我想要的东西。

https://medium.com/@tweededbadger/tutorial-dynamic-data-driven-svg-map-with-angularjs-b112fdec421d#.2eprazbg6

具体来说，我想点击地图的某个区域，以显示侧栏中该区域的信息。首先，显示所点击区域的名称。

然而，即使在网上查看10多个教程，我也似乎无法弄清楚哪些不起作用。 我想要更新的变量是控制器中的$ scope.selected ，从我可以看到我已经在指令范围内正确完成了绑定，不知道我哪里出错了。一直尝试不同的东西几个小时但没有任何地方，任何帮助将不胜感激。谢谢！

angular.module('SvgMapApp', ['ngRoute'])


.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.wardList = ["St. Anthony's Ground Floor", "Endoscopy", "St. Laurence's Corridor", "Sacred Heart Ward", "Physiotherapy"];
    $scope.selected = {name: "none"};
}]);


angular.module('SvgMapApp').directive('svgMap', ['$compile', function ($compile) {
return {
    restrict: 'A',
    templateUrl: 'img/GFloorMk1.svg',
    link: function (scope, element, attrs) {
        var areas = element[0].querySelectorAll('.ward');
        angular.forEach(areas, function (path, key) {
            var areaElement = angular.element(path);
            areaElement.attr("area", "");
            $compile(areaElement)(scope);
        })      
    }
}
}]);    

angular.module('SvgMapApp').directive('area', ['$compile', function ($compile) {
return {
    restrict: 'A',
    scope: {
        selected: '=',
    },
    link: function (scope, element, attrs) {
        scope.elementId = element.attr("id");
        scope.areaClick = function () {
            scope.selected = scope.elementId;
           alert(scope.elementId);
        };
        element.attr("ng-click", "areaClick()");
        element.removeAttr("area");
        $compile(element)(scope);
    }
}
}]);

这是主索引页面。视图显示正在显示的地图的当前楼层的SVG。

<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Data Responsive SVG Map</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body ng-app="SvgMapApp" ng-controller="MainCtrl">

<div class="container">

<div class="row">
  <div class="col-md-4"><a href="#/gfloor">Ground Floor</a></div>
  <div class="col-md-4"><a href="#/1stfloor">First Floor</a></div>
  <div class="col-md-4"><a href="#/2ndfloor">Second Floor</a></div>
</div>
<div class="row">
    <div class="col-md-10">
        <div ng-view></div>
    </div>  
    <div class="col-md-2">
        <div class="row">
            <h2>Ward Name</h2>
            <h2> {{ selected.name }}</h2>
    </div>
</div>
</div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
</body>
</html>

在gfloor.html partial中，这是指令在视图中的显示方式。

<div svg-map
class = "directive",
selected = "selected">

Answer 1

我通过添加

来解决这个问题

                    element[0].parentNode.appendChild(element[0]);

到区域指令，如

        scope.areaClick = function () {
           scope.selected = scope.elementId;
           element[0].parentNode.appendChild(element[0]);   
    };

以及

 areaElement.attr("selected", "selected");

到svgMap指令。

我还必须从视图部分中取出指令divs才能工作，而不是直接在index.html页面上。

的index.html：

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Data Responsive SVG Map</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/main.css"/>
</head>
<body ng-app="SvgMapApp" ng-controller="MainCtrl">
    <div class="row">

        <div class="col-md-8">
                <div svg-map></div>
                <!--<div ng-view></div>-->          <--would love this to work
        </div>
        <div class="col-md-4">
                <h2>Click for Data</h2>
                <p>
                    <button ng-click="createDummyData()" class="btn btn-block btn-default">Create Dummy Data</button>
                </p>
                <h1>Selected Ward:</h1>
                <h2> {{ selected.name }} </h2>
                  /.. more stuff here../                
                <h1> Summary of ward: </h1>
                <h2> {{ hoverArea }} </h2>
                <h2>(i.e. the one being moused over)</h2>
             /.. irrelevant stuff../
        </div>      
    </div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
</body>
</html>

我想，如果有人可以解释我实际做了什么更多的childNode更新事情...甚至更多，如果有人可以解释为什么指令不在视图内部更新范围部分在这种情况下。视图中的部分显示正常，svg显示预期行为正常，它只是不更新范围变量。部分就是这样：

gfloor.html：

<div svg-map></div>

所以我希望它能够同样工作！我确定这是我错过的其他愚蠢的东西，并且它并不重要，因为我可以复制和制作相同的页面，我只是好奇根据我自己的知识，如果有一些方法可以修复它，那么视图中的指令与索引页面上的指令行为相同。

干杯！

角度绑定：控制器不用指令更新

1 个答案: