Question

当我点击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中的布尔状态。由于你的代码没有耦合，我会投票给你的代码。

Answer 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

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

1 个答案: