Query:
Can a direct connection be established between two parallel directives without the need for a factory, parent-directive, or emit/broadcast, but simply using require: 'directiveA'?
Disclaimer: If this request seems far-fetched, please let me know. I am intrigued by the concept and wondering about its feasibility.
Let's dive in - I have two directives that run alongside each other.
HTML:
<div directive-a>
<!-- Directive A with a click event-->
<div ng-click="updateStore('1234')">Click to update store</div>
<p>{{storeDataA}}</p>
</div>
<div directive-b>
<!-- Directive B displays the updated storeID -->
<p> {{newStoreDataB}}</p>
</div>
JS:: directive-a
angular.module('carouselApp')
.directive('directiveA', function () {
return {
templateUrl: 'views/modal/directiveA.html',
// Using require statement.
require: 'directiveB',
link: function (scope, el, attrs, ctrl) {
scope.updateStore = function(storeID){
scope.storeDataA = storeID;
ctrl.updateStoreB(storeID)
};
}});
JS:: directive-b
angular.module('carouselApp')
.directive('directiveA', function () {
return {
templateUrl: 'views/modal/directiveB.html',
controller: function($scope){
this.updateStoreB = function(storeID){
$scope.storeB = storeID+"storeB";
}
}
});