从子控制器（窗体按钮）AngularJS 1.5访问父控制器

以下是我的情况：

我有一个组件，其视图呈现“保存”和“取消”按钮。按钮与单个输入字段相关，用户单击“编辑”可编辑值（或取消编辑）

原始实现的视图中有三个按钮，如下所示：

 <div class="input-edit input-no-border" ng-show="!$ctrl.editingTitle && !$ctrl.isSaving">
                    <input type="text" ng-value="$ctrl.knowledgeHubSection.title" class="field" readonly>
                    <button type="button"
                            class="button"
                            ng-click="$ctrl.editingTitle = !$ctrl.editingTitle">Edit
                    </button>
                </div>
                <div class="input-edit" ng-show="$ctrl.editingTitle">
                    <div class="field open">
                        <input type="text" ng-model="$ctrl.knowledgeHubSection.title" maxlength="20">
                    </div>
                    <div class="save-cancel-buttons">
                        <button class="button save-button"
                                ng-click="$ctrl.updateSection()"
                                ng-disabled="$ctrl.isSaving">
                            {[{ $ctrl.isSaving ? $ctrl.submitButtonLabels.submit.saving : $ctrl.submitButtonLabels.submit.idle }]}
                        </button>
                        <button type="button"
                                class="button cancel-button"
                                ng-click="$ctrl.reset()"
                                ng-disabled="$ctrl.isSaving">
                            Cancel
                        </button>
                    </div>
                </div>

及

这不起作用

---

所以问题是如何动态地将父组件“传递”给子组件，以便在整个应用程序中使用子组件

您可以为button组件上的save/cancel回调添加绑定，因此看起来有点像这样（为了强调我所做的更改，我已经将其精简到最低限度）：

angular.module（'app.admin.ui'）。组件(
“uiSaveCancelComponent”{
模板：[
'',
“保存”，
“取消”，
''
].加入（“”），
绑定：{
onSave:“&”，
onCancel:“&”
}
}
);

然后在父组件中，您可以像这样传递回调：

<ui-save-cancel-component 
    on-save="$ctrl.updateSection()" 
    on-cancel="$ctrl.reset()"></ui-save-cancel-component>

---

仅从父组件传递所需的内容，将使您的按钮组件更加可重用，因为它不必知道使用它的组件的任何信息。

非常感谢。您的建议激发了我代码中进一步的解耦。再次感谢！

angular.module('app.admin.ui')
.component(
    'uiSaveCancelComponent', {
        templateUrl: function(UiTemplate) {
            return UiTemplate.EDIT_SAVE_CANCEL;
        },
        bindings: {
            editing: '@'
        },
        require: {
            test: '^knowledgeHubComponent'
        },
        // transclude: true,
        controller: function() {
            'use strict';

            var $ctrl = this;

            $ctrl.submitButtonLabels = {
                submit: {
                    saving: 'Saving',
                    idle: 'Save'
                }
            };

            $ctrl.reset = function() {
                console.log('reset');
                $ctrl.editing = false;
            };


        }
    }
);

<div class="save-cancel-buttons">
   <button class="button save-button"
        ng-click="$ctrl.test.updateSection()"
        ng-disabled="$ctrl.test.isSaving">
    {[{ $ctrl.test.isSaving ? $ctrl.submitButtonLabels.submit.saving : $ctrl.submitButtonLabels.submit.idle }]}
  </button>
  <button type="button"
        class="button cancel-button"
        ng-click="$ctrl.reset()"
        ng-disabled="$ctrl.test.isSaving">
    Cancel
  </button>
</div>

bindings: { parent: '@' },
require: { parent: parent }

angular.module('app.admin.ui').component(
    'uiSaveCancelComponent', {
        template: [
            '<div>',
             '<button ng-click="$ctrl.onSave()">Save</button>',
             '<button ng-click="$ctrl.onCancel()">Cancel</button>',
            '</div>'
            ].join(''),
        bindings: {
          onSave: '&',
          onCancel: '&'
        }
    }
);

<ui-save-cancel-component 
    on-save="$ctrl.updateSection()" 
    on-cancel="$ctrl.reset()"></ui-save-cancel-component>