Angularjs 使用'&'；ng repeat中使用的指令中的符号

我试图允许具有隔离作用域的指令调用其父指令作用域上的函数。我已经读过很多在指令的范围声明中使用“&”符号来实现这一点的例子，但是由于指令是在ng repeat和ng开关中使用的，所以范围继承似乎阻碍了我。该函数似乎不符合我的指令的范围

我可以通过父链（$scope.$parent.$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
            }
        }
    }
}

dynamicclayout.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>

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>

---

我可以看到您有两个bug：

1） 您错误地分配了回调函数。 您只传递函数名，但Angular需要一个调用外部作用域函数的表达式，因此添加括号并传递

元素

参数

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

编辑：

---

我发现的另一个问题与模板的根元素有

ng repeat

有关，模板有

replace:true

。我不确定根本原因（可能是范围丢失），但要解决这个问题，要么（1）添加另一个根，要么（2）设置

replace:false

啊，我现在更了解这一部分了。但是，在my child指令中，removeElement（）在remove函数中仍然计算为undefined，将其更改为removeElement（{element:$scope.element}）不会引发错误，但不会调用父指令的函数。我还注意到，如果我试图将其传递给子指令，那么在控制器函数期间附加到父指令作用域的任何内容最终都是未定义的。这可能是真正的问题吗？还有另一个错误/输入错误。您无意中将元素传递给

removeElement

的返回值。更新了答案对不起，我想我不清楚。我已经尝试了第二步，结果没有出现错误，但是父指令函数没有被调用。啊，我没有注意到你发现了那个bug。尽管如此（因为我没有所有的数据，但没有更改模板的嵌套性质，所以我不得不用您的确切示例模拟一下）。@BrianSullivan，好的，所以当根元素有

ng repeat

并且指令有

replace:true

时，似乎存在问题。添加单独的根目录或设置

replace:false

可以解决此问题。

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

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