Question

我正在尝试允许具有隔离范围的指令在其父指令的范围上调用函数。我已经阅读了许多使用'＆amp;'的例子在指令的范围声明中表示这样做，但由于该指令在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。

使用'＆amp;'在ng-repeat中使用的指令中的符号

1 个答案: