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

时间:2015-10-09 15:50:38

标签: angularjs angularjs-directive angularjs-controller

我的代码显示的时间范围显示了标记,左侧是信息,右侧是事件信息。时间范围中的每种类型的时间轴都有两个指令用于标记/事件,它们本身使用抽象指令。

我正在添加功能以折叠标记/事件对,并且希望有一种更简洁的方法来执行此操作,而不是将折叠传递出 abstractTag 的控制器,进入 timeline-tag-foo / timeline-event-foo 之间的共享控制器,然后返回到 abstractEvent使用的重复 abstractTimelineCtrl

我希望能够做的是在每个不同的 abstractTag abstractEvent 指令对之间共享 abstractTimelineCtrl 的实例。这目前仅适用于 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;
    }
]);

1 个答案:

答案 0 :(得分:2)

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

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

在不使用服务的情况下,最好的办法是继续将隔离范围绑定到父节点并将其绑定到另一个节点,但是这样可能会得到一些不可靠的结果。