角型JS 1.5 - 角型コンポーネント間で通信したい

Question

deletePhotoとeditPhotoのメソッドをbusinessPhotosのコンポーネントにverticalGridのコンポーネントに公開しようとしています。しかし、それがどのようにアクセスできないのか。

任意の助けをいただければ幸いです、ありがとう

photo.js

angular.module('business') 
    .component('businessPhotos', { 
    templateUrl: 'business/photos.html', 
    controller: [ function() { 
     var $ctrl = this; 
     $ctrl.editPhoto = function(photo) { 
     // code 
     }; 

     $ctrl.deletePhoto = function(id) { 
     // code 
     }; 
    }] 
    }); 

---

photo.html

<vertical-grid ng-if="$ctrl.business.provider_photos" cells="$ctrl.business.provider_photos" delete-photo="$ctrl.deletePhoto(id)" edit-photo="$ctrl.editPhoto(photo)"></vertical-grid> 

---

垂直-grid.js

angular.module('dashboard') 
    .component('verticalGrid', { 
    bindings: { 
     cells: '<', 
     deletePhoto: '&', 
     editPhoto: '&' 
    }, 
    templateUrl: 'utils/vertical-grid.html', 
    selector: 'vertical-grid', 
    controller: ['$element', function($element) { 

     var $ctrl = this; 

     $ctrl.colGrid = []; 
     var numOfCols = 4; 
     var numOfCells = $ctrl.cells.length; 

     $ctrl.colCssClass = 'col-xs-3'; 


     for (var i = 0; i < numOfCells; i++) { 
     var colIndex = i % numOfCols; 
     if (!$ctrl.colGrid[colIndex]) { 
      $ctrl.colGrid[colIndex] = []; 
     } 
     $ctrl.colGrid[colIndex].push($ctrl.cells[i]); 
     } 
    }] 
    }); 

---

垂直-grid.html

<div class="provider-photos row"> 
    <div class="{{$ctrl.colCssClass}}" ng-repeat="col in $ctrl.colGrid track by $index"> 
    <div class="photo-outer-tile" ng-repeat="cell in col track by $index"> 
     <div class="photo-tile"> 
     <img ng-src="{{cell.tile_url}}"> 
     <div class="photo-controls"> 
      <a ng-click="$ctrl.deletePhoto(cell.id)" href="javascript:void(0);">Delete</a> 
      <a href="javascript:void(0);">Crop</a> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

である、あなたはservice（またはfactoryを使用することができangularjsコントローラ間で通信するには概念的には非常に似ている）。
例えばhereを参照してください。
$watchコンセプトを使用して、サービスからコントローラにリアルタイムでイベントを伝播できます。

もっと簡単な方法は、両方のコントローラーにinject $rootScopeを使用することです。

Answer 2

コンポーネントはネストされています。子コンポーネントはrequire

例で親の関数を呼び出すことができます：$のOnInit

.component('verticalGrid', { 
    require: { 
     parent: '^^businessPhotos' 
    }, 
    controller: function() { 
     this.$onInit = function() { 
     this.parent.editPhoto(); 
     }; 
    }, 

コンポーネントがロードされるまで待つように角度伝える伝えることが必要です。

^^ businessPhotosは、ローカルの親コンポーネントを参照します。単一の^も可能です。