从子控制器（表单按钮）AngularJS 1.5访问父控制器

Question

这是我的情况：

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

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

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

我们的应用程序在许多不同的视图中使用保存和取消按钮。因此，我想将该代码移出它曾经使用的视图到它自己的组件（我们在 AngularJS 1.5 上），以便我可以添加带有组件 DOM 元素的按钮。

我通过标签访问的以下两个文件完成了这项工作：

<ui-save-cancel-component></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>

我遇到的第一个问题是父组件的名称在组件中是硬编码的（测试：'^knowledgeBaseComponent'）。由于我想将此组件与其他组件一起使用，如何使父组件的名称成为子组件的require 中的变量？

我想也许我可以将父母的名字作为属性传递：<ui-save-cancel-component parent="knowledgeHubComponent"></ui-save-cancel-component>，在子组件中传递为：

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

这不起作用。

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

Answer 1

您可以在按钮组件上添加保存/取消回调的绑定，所以它看起来有点像这样（我已将其精简到最低限度以强调我的更改）：

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>

Here's a plunker where you can see it in action

仅从父组件传递必要的内容，将使您的按钮组件更具可重用性，因为它不必了解使用它的组件的任何信息。