У меня есть вложенная директива с изолированной областью. Массив объектов привязан к нему посредством двухсторонней привязки данных.
.directive('mapMarkerInput',['mapmarkerService', '$filter', '$timeout',function(mapMarkerService, $filter, $timeout) {
return {
restrict: 'EA',
templateUrl:'templates/mapmarkerInputView.html',
replace: true,
scope: {
mapmarkers: '='
},
link: function($scope, element, attrs) {
//some other code
$scope.addMapmarker = function($event) {
var mapmarker = {};
var offsetLeft = $($event.currentTarget).offset().left,
offsetTop = $($event.currentTarget).offset().top;
mapmarker.y_coord = $event.pageY - offsetTop;
mapmarker.x_coord = $event.pageX - offsetLeft;
mapmarker.map = $scope.currentMap;
$scope.mapmarkers = $scope.mapmarkers.concat(mapmarker);
};
$scope.deleteMapmarker = function(mapmarker) {
var index = $scope.mapmarkers.indexOf(mapmarker);
if(index !== -1) {
$scope.mapmarkers.splice(index,1);
}
};
//some other code
)
}]);
Эти 2 функции запускаются с помощью ng-click:
<img ng-if="currentMap" ng-click="addMapmarker($event)" ng-src="/xenobladex/attachment/{{currentMap.attachment.id}}" />
<div class="mapmarker-wrapper" ng-repeat="mapmarker in shownMapmarkers" ng-click="setZIndex($event)" style="position: absolute; top: {{mapmarker.y_coord}}px; left: {{mapmarker.x_coord}}px;">
<!-- some other code -->
<div class="form-group">
<label>Name:</label>
<input ng-model="mapmarker.name" value="mapmarker.name" class="form-control" type="text">
</div>
<div class="form-group">
<label>Description:</label>
<input ng-model="mapmarker.description" value="mapmarker.description" class="form-control" type="text">
</div>
<button class="btn btn-danger" ng-click="deleteMapmarker(mapmarker)">Delete</button>
</div>
Как вы можете видеть, я связываю имя и описание напрямую с помощью ng-model, и это работает отлично. Свойства также доступны в родительской области, но ни удаление, ни добавление не работают (его изменения в области директив, но не в родительской области).
Насколько я понимаю, эти изменения должны применяться, потому что я вызываю эти функции с помощью ng-click, и у меня есть другие примеры, где это работает. Единственное отличие состоит в том, что я привязываюсь к массиву объектов, а не к одному объекту/свойству.
Я попытался использовать $timer
и updateParent()
($scope.$apply()
updateParent()
не работает → генерирует исключение, которое функция уже находится в цикле дайджестов), но не имеет успеха, поэтому похоже, что эти изменения не просматриваются при все.
Код директивы выглядит так:
<map-marker-input ng-if="$parent.formFieldBind" mapmarkers="$parent.formFieldBind"></map-marker-input>
Он вложен в настраиваемую директиву поля формы, которая динамически формирует шаблон поля формы и имеет поэтому template: '<div ng-include="getTemplate()"></div>'
качестве шаблона, который создает новый дочерний объект - поэтому зачем нужен $parent
.
Связывание определенно работает в одном направлении, ожидаемые данные доступны в директиве, и если я регистрирую данные после их изменения путем удаления или добавления, это также верно, но только изнутри директивы.
Поскольку ng-model
работает, я предполагаю, что может быть простое решение проблемы.
ОБНОВИТЬ
Я создал plunkr с упрощенной версией: http://plnkr.co/85oNM3ECFgCzyrSPahIr
Просто щелкните в любом месте синей области, и новые точки добавляются из директивы mapmarker. Прямо сейчас я действительно не предотвращаю добавление очков, если вы удаляете или редактируете их - так что вы быстро получите много очков ;-)
Существует кнопка для отображения данных из родительской области и из области содержимого.
Если вы отредактируете имя или описание одной существующей точки, которая также будет изменена в родительской области (привязана через ng-model
). Но все новые точки или удаления игнорируются (связаны внутри функций, называемых через ng-click
).
Если вы хотите обновить родительскую область, вам нужно получить к ней доступ через $ parent еще раз, я меняю
mapmarkers="$parent.formFieldBind"
к:
mapmarkers="$parent.$parent.formFieldBind"
ng-include создайте еще одну область, поэтому вам нужно снова обратиться к родителям.
$parent
то обычно что-то не так. За исключением редких случаев, когда вам нужен родительский индекс, вам не нужно использовать $ parent. Как уже упоминалось, демо поможет