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

当我点击Not heartdiv时，所有Not heart div必须隐藏并且所有Hearted div都会显示。当我点击Hearted div时，所有Hearted div必须隐藏，并且所有Not heart div都会显示。与collection组件的相同交互。当hearted DIV显示时，该heartNumber必须增加1，当Not heart DIV显示时，该heartNumber必须删除1.如何与不同的AngularJS 1.58组件进行交互？

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中的布尔状态。我会为您的代码投票，因为您的代码没有耦合。

来源

2017-02-09 jiexishede

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

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

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

来源

2017-04-25 14:07:52 Fidelacho

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

回答

相关问题