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-editable手册说形式名称="{{box.key}} {{$ index}}"应该在$ scope上创建一个属性但是当我在console.log($ scope)时我找不到属性

Answer 1

实际上,x-editable将表单添加到范围中,但不是添加到相同的范围formAction.ng-repeat为它呈现的每个项创建一个范围,它是原始范围的子项,您将在这些范围上找到表单.

一个解决方案是将子范围传递给formAction,'this'如下:

<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();
    }
};