角度指令（2-way-data-binding） - 不通过 ng-click 更新父级

Question

我有一个具有隔离范围的嵌套指令。一个对象数组通过 2 路数据绑定绑定到它。

.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
       )
}]);

这两个函数是通过 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() 不起作用 -> 抛出该函数已在摘要循环内的异常）但没有成功，因此看起来这些更改并未在全部。

指令代码如下所示：

<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 调用的函数中）。

Answer 1

如果你想更新父作用域，你需要再次通过 $parent 访问它， 我改变了

mapmarkers="$parent.formFieldBind"

到：

mapmarkers="$parent.$parent.formFieldBind"

ng-include 再创建一个范围，因此您需要再次访问父级。

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