Question

以下是我的情况：

我有一个组件，其视图呈现＆＃34; save＆＃34;和＆＃34;取消＆＃34;按钮。这些按钮与单个输入字段相关，用户点击该字段即可编辑＆＃34;编辑值（或取消编辑）。

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

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

我对此解决方案的第一个问题是父组件的名称在组件中是硬编码的（test：＆＃39; ^ knowledgeBaseComponent＆＃39;）。由于我想将此组件与其他组件一起使用，如何将父组件的名称设置为子项require中的变量？

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

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

这不起作用。

所以问题是如何动态地传递＆＃39;子组件的父组件，以便我可以在整个应用程序中使用子组件？

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

只需从父组件传递必要的内容，就可以使您的按钮组件更具可重用性，因为它不需要知道任何使用它的组件。

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

1 个答案: