加载并点击通过一个指令时调用多个指令

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页面时，画廊和summary指令也应加载并在index.html中可见。另外，我正在加载时在index.html中获取一些数据，我也想将该数据传递给summary，gallery和list指令。我也有一个画廊标签和列表标签。当我单击图库选项卡时，我希望加载图库指令；当我单击列表选项卡时，我希望向列表指令加载数据。最初，画廊和摘要指令应默认存在。切换只会在图库和列表视图中发生。摘要指令应固定在此处。

最初，我在单个指令中开发了所有代码。但是现在我试图将所有这些都设置为不同的指令。 下图说明了我的情况

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

致谢

Answer 1

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

此处显示了Sharing data between directives