如何與不同的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組件進行交互？

回答

相關問題