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>

这里，当itemsList指令使用itemsContainer控制器设置隐藏摘要时，在itemsSummary中没有更新？如何使所有三个指令同步？兄弟指令之间沟通的最佳方式？目前正在做我不想做的事件发射。我需要一个最佳实践解决方案。

我的要求：

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

如何将child2中的任何更新传递给child1？

Answer 1

您需要进行手动转换，这是我在类似情况下所做的。 Anglers默认转换不起作用，因为它创造了一个新的范围。

<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是进行翻译的手动方式，而不是ng-transclude

参考：https://github.com/angular/angular.js/issues/1809

如何在Angular js中的指令之间进行通信？

1 个答案: