, поэтому я слежу за этим руководством по тому, как сделать интерактивную SVG-карту с угловым. я сейчас нахожусь там, где я пытаюсь вычеркнуть себя и заставить его делать то, что я хочу.Угловые привязки: контроллер не обновляется с директивой
В частности, я хочу, нажав на область карты, чтобы открыть информацию о этой области в боковой панели. Начнем с того, что отображается имя области, на которую была нажата кнопка.
Однако даже форма, смотрящая на 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">
Я вижу, что вы помещаете выделенную как переменную с двусторонней привязкой в «область», но я не вижу, чтобы вы назначали эту «выбранную» переменную где-либо снаружи. так, где бы это «выбрали» привязать? нигде ... поэтому ваши внешние области никогда не будут проинформированы о каких-либо изменениях внутри директивы 'area' –
Спасибо за ответ! Я думал, что синтаксис, используемый для двухсторонней привязки, означает, что $ scope.selected в контроллере будет обновляться переменной с тем же именем в директиве - это не так? Как правильно привязать выбранную переменную? Приветствия. edit: Подождите, это потому, что 'area' является своего рода дочерним элементом 'svgMapApp'? Должна ли быть привязка в svgMapApp, как технически это директива в родительской области контроллера? – Shane
Может ли кто-нибудь уточнить, что понимает Патрик по «выбранной» переменной, не связанной с ней? Мне интересно, может быть, «выбранный» должен быть изменен в директиве SvgMapApp вместо директивы region, чтобы передать его контроллеру, но я немного потерял ... – Shane