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

所以我一直在关注如何使用Angular制作交互式SVG地图。我现在正处在我想要自己发泄的地步，并让它做我想做的事情。角度绑定：控制器不会更新指令

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

具体来说，我想点击地图上的区域，弹出信息有关的侧边栏区域。首先，显示点击区域的名称。

然而，即使是在网上查看10个以上的教程，我似乎无法弄清楚什么是不工作。 我试图更新的变量是$ scope.selected在控制器，从我可以看到我已经在指令范围内正确地进行了绑定，不知道我哪里出错了。一直尝试不同的东西几个小时，但getitng无处，任何帮助将不胜感激。谢谢！

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">

来源

2016-02-25 Shane

我看到你把选择为“区域”上的双向绑定变量，但我没有看到你在外部任何地方分配这个“选定”变量。那么，“选择”绑定到哪里？无处......这就是为什么你的外部示波器永远不会被告知“区域”指令内部的任何变化 –

感谢您的答复！我在考虑用于双向绑定的语法意味着控制器中的$ scope.selected会被指令中具有相同名称的变量更新 - 这不是这种情况吗？如何正确绑定选定的变量？干杯。编辑：等等，是因为'area'是'svgMapApp'的一个小孩吗？是否也必须在svgMapApp中有一个绑定，从技术上讲，这是控制器父级范围内的指令？ – Shane

任何人都可以澄清什么帕特里克'选定'变量意味着没有被绑定在外面？我想知道是否应该更改SvgMapApp指令而不是区域指令，以便将它传递给控制器，但是我有点丢失... – Shane

我加入

    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自己从视图partials中取出来，而不是直接在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更新的事情的解释......甚至moreso如果有人可以解释为什么指令唐”在这种情况下，在视图内部更新范围。视图中的部分显示正常，并且svg显示良好且具有预期行为，但它不会更新范围变量。部分仅仅是这样的：

gfloor.html：

<div svg-map></div>

所以我希望它的工作一样TBH！我敢肯定，这是我错过的其他愚蠢的东西，没关系，因为我可以复制和制作相同的页面，我只是对自己的知识感到好奇，如果有修复它的方法，那么指令在视图中的行为与直接在索引页面上的指令相同。

干杯！

来源

2016-02-29 20:27:05 Shane

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

回答

相关问题