在 ng-repeat 中使用的指令中使用“&”表示法

Question

我正在尝试允许具有隔离范围的指令在其父指令的范围内调用函数。我已经阅读了许多在指令的范围声明中使用“&”符号来执行此操作的示例，但是由于该指令在 ng-repeat 和 ng-switch 中使用，因此范围继承似乎阻碍了我。该函数似乎没有进入我的指令范围。

我可以通过向上父链（$scope.$parent.$parent.$parent.removeElement() 有效）来访问该函数，但这感觉很糟糕。有没有办法解决这个问题？

父指令：

function dynamicLayoutDirective($compile, $log, bevoLayoutEngine, layoutService) {
    return {
        restrict: 'ECMA',
        replace: true,
        templateUrl: 'templates/dynamicLayout.html',
        scope: {
            layoutSchema: '=',
            layout: '=',
            editMode: '='
        },
        controller: function($scope) {
            $scope.removeElement = function(element) {
                // This is the function I want to call
            }
        }
    }
}

dynamicLayout.html

<div ng-repeat="element in layoutSchema">
    <div ng-switch on="element.type">
        <bevo-input ng-switch-when="TextBoxType" element="element" edit-mode="editMode" remove-element="removeElement"></bevo-input>
        <bevo-datepicker ng-switch-when="DateType" element="element" edit-mode="editMode"></bevo-datepicker>
        <bevo-section ng-switch-when="SectionType" element="element" edit-mode="editMode"></bevo-section>
    </div>
</div>

子指令：

angular.module('ngBevoInput', []).directive('bevoInput', function() {
    return {
        restrict: 'E',
        templateUrl: 'templates/bevoInput.html',
        scope: {
            element: '=',
            editMode: '=',
            removeElement: '&'
        },
        controller: function($scope) {
            $scope.remove = function() {
                $scope.removeElement()({element: $scope.element});
                // $scope.removeElement() returns undefined here.
                // I can get to the function by doing $scope.$parent.$parent.$parent.removeElement
            }
        }
    }
});

bevoInput.html

<div class="col-md-10 form-inline">
    <input type="text" value="{{element.display}}" ng-hide="editMode" />
    <input type="text" disabled ng-show="editMode" />
    <button ng-show="editMode" ng-click="remove()" />
</div>

Answer 1

我可以看到你有 2 个错误：

1) 您分配的回调函数不正确。 您只传递函数名称，但 Angular 需要一个调用外部作用域函数的表达式，因此请添加括号并传递 element 参数。

<bevo-input remove-element="removeElement(element)"></bevo-input>

2) 您将{element: $scope.element} 传递给$scope.removeElement 函数的返回值。去掉多余的括号。

$scope.removeElement({element: $scope.element});

编辑：

我发现的另一个问题与具有ng-repeat 和模板具有replace: true 的模板的根元素有关。我不确定根本原因（可能是范围丢失），但要解决这个问题，要么（1）添加另一个根，要么（2）设置replace: false。