異なるAngularJS 1.58コンポーネントとのやりとり方法は？

Not heartdivをクリックすると、すべてNot heart divが非表示になり、すべてHearted divと表示されます。 Hearted divをクリックすると、すべてHearted divが非表示になり、すべてNot heart divが表示されます。コンポーネントはcollectionと同じです。 https://jsfiddle.net/jiexishede/Ltsgnn86/1/異なるAngularJS 1.58コンポーネントとのやりとり方法は？

： heartedのdivが表示されている場合は、heartNumberは Not heartのdivが表示されている場合は1を追加する必要があり、heartNumberは1

My application architecture is like this:

heartフォルダが上で削除する必要があります

collectionフォルダーは： https://jsfiddle.net/jiexishede/hq6dju3c/1/

フォルダが上にある：さて、私はデモでテキストを変更した

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

： https://jsfiddle.net/jiexishede/e9bxf1f9/1/

index.htmlのコードを下回っています。デモでは、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コンポーネントとのやりとり方法は？

答えて

関連する問題