角度綁定：控制器不會更新指令

所以我一直在關注如何使用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

角度綁定：控制器不會更新指令

回答

相關問題