Angular JS 1.5 - 我想在 Angular js 组件之间进行通信答案

【问题标题】：Angular JS 1.5 - I want to communicate between angular js componentsAngular JS 1.5 - 我想在 Angular js 组件之间进行通信
【发布时间】：2023-04-06 13:18:01
【问题描述】：

我正在尝试将businessPhotos 组件的deletePhoto 和editPhoto 方法公开到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>

vertical-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]);
      }
    }]
  });

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

【问题讨论】：

标签： javascript angularjs angularjs-1.5 angular-component-router

【解决方案1】：

要在 angularjs 控制器之间进行通信，您可以使用 service（或 factory，在概念上非常相似）。
参见例如here。
您可以使用$watch 概念将事件从服务实时传播到控制器。

更简单的方法是在两个控制器中使用注入 $rootScope。

【讨论】：

这不是使用组件架构的正确方法。

【解决方案2】：

您的组件是嵌套的。子组件可以通过require调用父函数

例子：

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

$onInit 是告诉 Angular 等到组件加载完成的必要条件。

^^businessPhotos 将引用本地父组件。单个 ^ 也是可能的。

【讨论】：