訪問父控制器（形式鍵）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> 

我已經通過了由標籤訪問以下兩個文件來完成此我在這個解決方案中遇到的第一個問題是父組件的名稱在組件中被硬編碼nt（測試：'^ 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

只有通過什麼是從父組件，WIL必要l讓你的按鈕組件更加可重用，因爲它不需要知道任何有關使用它的組件。