角度绑定：控制器未使用指令更新答案

【问题标题】：Angular bindings: controller not updating with directive角度绑定：控制器未使用指令更新
【发布时间】：2016-06-08 19:54:43
【问题描述】：

所以我一直在学习如何使用 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 部分中，这就是指令在视图中的显示方式。

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

【问题讨论】：

我看到您将 selected 作为双向绑定变量放在“区域”上，但我没有看到您在外部任何地方分配此“选定”变量。那么，“选定”将绑定到哪里？无处...这就是为什么您的外部范围永远不会被告知“区域”指令内的任何更改
感谢您的回复！我在想用于双向绑定的语法意味着控制器中的 $scope.selected 将由指令中具有相同名称的变量更新 - 不是这样吗？如何正确绑定选定的变量？干杯。编辑：等等，是不是因为“区域”是“svgMapApp”的一种子项？ svgMapApp 中是否也必须有一个绑定，从技术上讲，这是控制器父范围内的指令？
谁能澄清帕特里克所说的“选定”变量没有被绑定在外面是什么意思？我想知道是否应该在 SvgMapApp 指令而不是 region 指令中更改“selected”以便将其传递给控制器，但我有点迷失了......
也许您可以显示将控制器和指令放在一起的 html 文件？
添加了 Index.html。是因为我试图在视图中显示 SVG 吗？还是我弄乱了指令 div 中的控制器/指令绑定？感谢您的回复。

标签： angularjs svg binding scope directive

【解决方案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 指令。

我还必须将指令 div 本身从视图部分中取出来工作，而不是将其直接放在 index.html 页面上。

索引.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>

所以我希望它能够在同一时间工作！我确定这是我错过的其他愚蠢的东西，这并不重要，因为我可以复制和粘贴以制作相同的页面，我只是好奇我自己的知识是否有办法修复它所以视图中的指令的行为与直接在索引页面上的指令相同。

干杯！

【讨论】：