如何与不同的 AngularJS 1.58 组件进行交互？答案

【问题标题】：How to make Interactions with different `AngularJS 1.58` components?如何与不同的 AngularJS 1.58 组件进行交互？
【发布时间】：2017-06-27 07:59:59
【问题描述】：

当我单击Not heart div 时，所有Not heart div 必须隐藏，所有Hearted div 都会显示。当我单击Hearted div 时，所有Hearted div 必须隐藏，所有Not heart div 都会显示。与collection 组件的相同交互。当hearted div 显示时，heartNumber 必须加1。当Not heart div 显示时，heartNumber 必须删除1。

My application architecture is like this:

heart 文件夹已打开： https://jsfiddle.net/jiexishede/Ltsgnn86/1/

collection 文件夹已打开： https://jsfiddle.net/jiexishede/hq6dju3c/1/

show 文件夹已打开： https://jsfiddle.net/jiexishede/e9bxf1f9/1/

index.html中的代码如下：

   <body ng-app="app" ng-controller="controller">
<div style="margin-bottom: 10px">
    <heart is-heart="heartBoolean"></heart>
    <collection is-collection="collectionBoolean"></collection>
</div>

<div>
    <shownumber collection-number="10" heart-number="10"></shownumber>
</div>

<div style="margin-top: 10px">
    <heart is-heart="heartBoolean"></heart>
    <collection is-collection="collectionBoolean"></collection>
</div>

</body>
<script src="angular.js"></script>
<script src="collection/collectionComponent.js"></script>
<script src="heart/heartComponent.js"></script>
<script src="show/showComponent.js"></script>
<script>
    var app = angular.module('app',[]);
    app.controller('controller', function ($scope) {
        $scope.heartBoolean = true;
        $scope.collectionBoolean = true;
    })
</script>
<script>
    collectionComponentFactoryFun('app','./collection');
    showComponentFactoryFun('app','./show');
    heartComponentFactoryFun('app','./heart');
</script>

现在，我更改了演示中的文字。该演示使用名为 collectionBoolean 的变量和名为 heartBoolean 的变量。如果您更改 component 中的布尔状态。我会投票给你的代码，因为你的代码没有耦合。

【问题讨论】：

标签： angularjs components

【解决方案1】：

我希望这还不算太晚....根据我在您的代码中看到的内容，我认为主要问题在于您设置主要模块和组件的方式。

我刚刚做了一点工作，我想出了这个希望它会奏效。

angular.module('plunker', []);

angular
  .module( 'plunker' )
  .controller( 'MainCtrl', function ( $scope ) {
      $scope.isHeart = true;
      $scope.isCollection = true;
  });

var HeartCtrl = function () {

    var ctrl = this;

    ctrl.$onInit = function () {
          var isHeart = angular.copy( ctrl.isHeart );
          console.log( 'isHeart : ', isHeart );
      };

    ctrl.$onChanges = function ( changes ) {
        if ( changes.isHeart  && !changes.isHeart.isFirstChange() ) {
            ctrl.isHeart = angular.copy( changes.isHeart );
        }
    };

    ctrl.clickHeartFun = function (boolean_number) {
          ctrl.isHeart = boolean_number;
      };
};

angular
        .module( 'plunker' )
        .component( 'heart', {
            bindings: {
               isHeart : '<'
            },
            templateUrl  : 'heart.tpl.html',
            controller  : HeartCtrl
        });

http://plnkr.co/edit/RJwYJ2iAxEQOV5jBwyXj?p=preview

【讨论】：