在加载时调用多个指令并单击一个指令

Question

我有一个index.html 页面，该页面作为单个指令运行。

angular.module('app').directive('index', function() {
    return {
        templateUrl: 'html/index.html'
    }
}).controller('index', ['$scope', '$http', function($scope, $http) {}])

在index.html 内，我有三个标签gallery、list 和summary。我已将所有这三个选项卡放在不同的指令中，就像这样。

/*Gallery directive*/
angular.module('app').directive('gallery', function() {
    return {
        templateUrl: 'html/gallery.html'
    }
})

/*List directive*/
angular.module('app').directive('list', function() {
    return {
        templateUrl: 'html/list.html'
    }
})

angular.module('app').directive('summary', function() {
    return {
        templateUrl: 'html/summary.html'
    }
})

我希望当我加载 index.html 页面时，库和摘要指令也应该加载并在 index.html 中可见。此外，我在加载时获取 index.html 中的一些数据，我还想将这些数据传递给摘要、图库和列表指令。我还有一个画廊选项卡和列表选项卡。当我单击画廊选项卡时，我希望加载画廊指令，当我单击列表选项卡时，我希望列表指令与数据一起加载。最初，画廊和摘要指令应该默认存在。切换只会发生在图库和列表视图中。 summary 指令应该固定在那里。

最初我在一个指令中开发了它。但现在我正试图在不同的指令中制作所有这些。 下图解释了我的情况

我不确定，我们可以通过单个指令调用多个指令吗？如果是，那么我该如何实现呢？

问候

Answer 1

创建一个工厂来保存注入指令的数据

这里显示Sharing data between directives