angular 指令（2 向数据绑定）- 不会通过 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
       )
}]);

这 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() 不起作用 -> 抛出函数已经在摘要循环中的异常）但没有成功，所以它看起来这些变化根本就没人看。

指令代码如下所示：

<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

angular 指令（2 向数据绑定）- 不会通过 ng-click 更新父级

angular directive (2-way-data-binding) - parent is not updated via ng-click

angularjs

angularjs-directive

2-way-object-databinding