угловая директива (2-way-data -inding) - родитель не обновляется с помощью ng-click

0

У меня есть вложенная директива с изолированной областью. Массив объектов привязан к нему посредством двухсторонней привязки данных.

.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).

  • 4
    Было бы лучше, если бы вы создали plunker или jsfiddle, чтобы читатели могли легко воспроизвести вашу проблему.
  • 1
    если вам нужно использовать $parent то обычно что-то не так. За исключением редких случаев, когда вам нужен родительский индекс, вам не нужно использовать $ parent. Как уже упоминалось, демо поможет
Показать ещё 4 комментария
Теги:
angularjs-directive
2-way-object-databinding

1 ответ

1
Лучший ответ

Если вы хотите обновить родительскую область, вам нужно получить к ней доступ через $ parent еще раз, я меняю

mapmarkers="$parent.formFieldBind"

к:

mapmarkers="$parent.$parent.formFieldBind"

ng-include создайте еще одну область, поэтому вам нужно снова обратиться к родителям.

http://plnkr.co/edit/27qF6ABUxIum8A3Hrvmt?p=preview

  • 0
    Вы правы, это работает с двойным $ parent, большое спасибо! Но знаете ли вы, почему ng-модель работает без проблем?
  • 0
    Я также не понимаю, почему созданы две дочерние области .... с двойным $ parent я все еще обращаюсь к scrope dircetives поля формы. Это должен быть только один из ng-include или? Я действительно хотел бы принять ваш ответ, но мне нужно иметь лучшее понимание проблемы, чтобы понять, является ли это правильным решением (я использую директиву поля формы для нескольких полей, которые прекрасно работают с одним $ parent потому что я использую ng-модель и иногда ng-change в них).
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню