Question

我有一个带有隔离范围的嵌套指令。通过双向数据绑定将对象数组绑定到它。

.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()不起作用 - ＆gt;抛出该函数已在摘要周期内的异常）但没有成功，所以看起来比如这些变化根本没有被观察到。

指令代码如下所示：

<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

角度指令（双向数据绑定） - 不通过ng-click更新父级

1 个答案: