是否可以在两个隔离的指令之间共享一个控制器？

Question

我有一个时间表的代码，它在左侧显示 tag 信息，在右侧显示 event 信息。时间范围内的每种类型的时间线都有两个针对 tag/event 的指令，它们在自身内部使用抽象指令。

我正在添加折叠 tag/event 对的功能，希望有比从 中传递 collapsed 更简洁的方法abstractTag 的控制器，进入 timeline-tag-foo/timeline-event-foo 之间的共享控制器并返回到由 abstractEvent.

使用的重复 abstractTimelineCtrl

我希望能够在每对不同的 abstractTag 和 [=24] 之间共享一个 abstractTimelineCtrl 实例=]abstractEvent 指令。这目前只适用于 abstractTag 但我还没有弄清楚如何给相应的 abstractEvent 相同的实例 abstractTimelineCtrl。任何想法将不胜感激。

HTML:

<ul id="tags">
    <timeline-tag-foo>
        <abstract-tag></abstract-tag>
    </timeline-tag-foo>

    <timeline-tag-bar>
        <abstract-tag></abstract-tag>
    </timeline-tag-bar>
</ul>

<div id="scrollContainer">
    <div id="events">
        <timeline-event-foo>
            <abstract-event></abstract-event>
        </timeline-event-foo>

        <timeline-event-bar>
            <abstract-event></abstract-event>
        </timeline-event-bar>
    </div>
</div>

JS:

angular.module('abstractTimeline', [])
.directive('abstractTag', [
    function() {
        restrict: 'E',
        bindToController: true,
        controller: 'abstractTimelineCtrl',
        scope: {
            name: '@'
        },
        templateUrl: 'abstractTimeline/abstractTag.html',
        transclude: true
    }
])
.directive('abstractEvent', [
    function() {
        restrict: 'E',
        scope: {
            width: '@'
        },
        templateUrl: 'abstractTimeline/abstractEvent.html',
        transclude: true
    }
])
.controller('abstractTimelineCtrl', [
    function() {
        var vm = this;
        vm.collapsed = false;
    }
]);

Answer 1

控制器不是单例，每次 Angular 遇到该构造函数时都会创建一个新版本的控制器。因此，虽然您可以在两个隔离范围指令中使用相同的控制器，但您不能使用相同控制器的相同实例。

服务在 AngularJS 中是单例的，因此如果您需要共享数据 ($scope)，最好以这种方式传递数据而不是依赖控制器。

在不使用服务的情况下，最好的办法是继续将隔离作用域绑定到它们的父级，然后再绑定到另一个，但那样你可能会得到一些不可靠的结果。

是否可以在两个隔离的指令之间共享一个控制器？

Is it possible to share a controller between two directives that are isolated?

angularjs

angularjs-directive

angularjs-controller