Angular-xeditable无法从控制器按名称访问窗体

Question

我试图在ng-repeat中构建angualr x-editable表单，但是当我试图通过控制器中的$scope访问表单时，我得到了一个错误。

<div ng-repeat="course in box.value track by $index">
   <form editable-form name="{{box.key}}{{$index}}">
      .....
      <button 
         type="button"
         class="btn btn-primary"
         ng-click="formAction(box.key, $index, 'show')">Edit
      </button>
   </form>
</div>

在JavaScript中，我有以下代码，但这会在执行时导致错误。

$scope.formAction = function (key, index, action) {
    var formName = key + index;
    if (action === 'show') {
         //console.log(formName) shows correct form name yet
        //Error!! TypeError: Cannot read property '$show' of undefined
        $scope[formName].$show();
    }
};

可x编辑的手册说表单name="{{box.key}}{{$index}}“应该在$scope上创建一个属性，但当我console.log($scope)时，我找不到该属性

Answer 1

实际上，x-editable会将表单添加到作用域中，但不会添加到formAction所在的同一作用域中。ng-repeat为它呈现的每个项目创建一个作用域，这些作用域是原始作用域的子项，您可以在这些作用域上找到表单。

一种解决方案是将子作用域传递给formAction，如下所示：

<button 
     type="button"
     class="btn btn-primary"
     ng-click="formAction(box.key, $index, 'show', this)">Edit
</button>

然后在子范围中找到的表单上调用$show()：

$scope.formAction = function (key, index, action, childScope) {
    var formName = key + index;
    if (action === 'show') {
        childScope[formName].$show();
    }
};