How to communicate between directives in Angular js?

Question

app.directive("itemsContainer", function() {

    return {
        restrict: "E",
        controllerAs: "itc",
        bindToController: true,
        controller: function() {
            this.showItems = false;

            this.items = null;

            this.loadItems = (data) => {
                this.items = data;
                this.showItems = true;
            }

            this.hideSummary = () => {
                this.showItems = false;
            }
        },
        templateURL:'itemsContainer.html'
    };

});

app.directive("itemsSummary", function() {

    return {
        restrict: "E",
        require: "^itc",
        link: function(scope, element, attrs, ctrl) {
            scope.showSummary = ctrl.showItems;
            scope.items = ctrl.items;
        },
        templateURL:'itemsSummary.html'
    };
});

app.directive("itemsList", function() {

    return {
        restrict: "E",
        require: "^itc",
        scope: {
            items = "="
        },
        link: function(scope, element, attrs, ctrl) {

          if(items !== null)
          {
              ctrl.loadItems(items);
          }

          scope.hideSummary = () => {
              ctrl.hideSummary();
          }

        },
        templateURL:'itemsList.html'
    };
});

<itemsContainer>
<itemsSummary>{{itemsSummary}}</itemsSummary>
<itemsList>{{items}}</itemsList>
</itemsContainer>

Here, when itemsList directive set the Hide summary using itemsContainer controller, which is not updated in itemsSummary? how to make all the three directive in sync? Best way to communicate between sibling directive? Currently am doing with Event emit which I don't want to do. I need a best practice solution.

My requirement:

<parent> <child1></child1> <child2></child2> </parent>

How to communicate any update in child2 to child1?

As it is written, this is too broad, consider rewording it to match one only question. Asking for best practices could fit better in https://codereview.stackexchange.com/ — Cleptus, Apr 10 '18 at 06:54
It not updates `this.showItems` variable or HTML? Also, if they are sibling, not nested, you can't reference one to another. — Slava Utesinov, Apr 10 '18 at 07:06
@SlavaUtesinov Yes, this.showItems is not updated in summary html. how to do it? — Mogan Rangan, Apr 10 '18 at 07:15
@MoganRangan, try to wrap it into: `scope.$apply(() => { this.showItems = false; })` — Slava Utesinov, Apr 10 '18 at 07:16
This is a perfect example of directives Vs components. These should be nested components — gyc, Apr 10 '18 at 07:17
@SlavaUtesinov am getting **"$digest already in progress"** when I do scope.apply() — Mogan Rangan, Apr 10 '18 at 08:01
@MoganRangan, ok, inject `$timeout` and use it this way: `$timeout(() => { this.showItems = false; }, 0)` — Slava Utesinov, Apr 10 '18 at 08:03
I solved this issue after converting to component by doing the transclution manually. Posted the solution for similar question here - https://stackoverflow.com/a/49921870/1637960 — Mogan Rangan, Apr 19 '18 at 13:06

score 0 · Answer 1 · answered Apr 19 '18 at 13:10

You need to do manual transclution, that's what I did in a similar situation. Anglers default transclution won't work, since it creates a new scope.

<itemsContainer>
  <itemsSummarydata="$ctrl.data"></itemsSummary>
</itemsContainer>


/** * Parent component */

angular.module("app").component("itemsContainer", function() {
    constructor() {
        return {
            restrict: 'E',
            replace: true,
            template: "<div transclude-extended></div>",
            transclude: true,
            bindToController: true,
            controller: function () {
                var ctrl = this;
                    ctrl.data = 'This is sample data.';
            }
        };
    }
});

/** * Transclude Extended Directive */

angular.module("app").directive("transcludeExtended", function(){
    constructor() {
        return {
            link: function ($scope, $element, $attrs, controller, $transclude) {
                var innerScope = $scope.$new();
                $transclude(innerScope, function (clone) {
                    $element.empty();
                    $element.append(clone);
                    $element.on('$destroy', function () {
                        innerScope.$destroy();
                    });
                });
            }
        }
    };
});

transcludeExtended is the manual way of doing the translation, instead of ng-transclude

Reference: https://github.com/angular/angular.js/issues/1809

How to communicate between directives in Angular js?

1 Answers1