javascript - AngularJS : Sharing a controller scope between two directives with isolate scopes

Question

我有两个指令，它们提供对同一组数据的不同 View 。这两个指令都需要依赖于 Controller 中包含的中央功能。 Controller 使用各种服务来加载项目、执行搜索等网格或提要 View 。

我想在两个指令之间共享单个 Controller 。我意识到我可以通过使用 ng-controller 在 dom 中两个指令上方的某个级别指定 Controller 来做到这一点。但是，我无法让它工作，因为这两个指令都需要将一个由中央 Controller 使用的配置对象传递给它们(最好通过隔离范围)。

我不能简单地在每个指令中指定 Controller ，因为 angularjs Controller 不是单例。通过这样做，将有两个 Controller 实例，因此有两组数据、监视等。

下面是一个示例情况。

HTML

<!-- myConfigObject comes from a scope above ListingController -->
<div data-ng-controller="ListingController">
    <div data-dir1 data-config="myConfigObject"></div>
    <div data-dir2 data-config="myConfigObject"></div>
</div>

Controller :

.controller('ListingController',
    function ($scope) {
        //Try to use $scope.config here and get errors because it's being passed in on 
        //children dom elements

        //These items need to be used in the templates provided in the directives sharing
        //this controller
        $scope.items = [
            {name:'test1'},
            {name:'test2'}
        ];
    }
);

指令:

.directive('dir1',
    function() {
        return {
            templateUrl: 'someTemplateThatUsesStuffOnControllerScope.html',
            scope: {
                config: '='
            }
        }
    }
)
.directive('dir2',
    function() {
        return {
            templateUrl: 'someOtherTemplateThatUsesStuffOnControllerScope.html',
            scope: {
                config: '='
            }
        }
    }
)

someTemplateThatUsesStuffOnControllerScope.html

<ul>
    <li data-ng-repeat="item in items">{{item.name}}</li>
</ul>

最后，我想使用隔离作用域，以保护其他父作用域免于被指令覆盖可能的“$scope.config”

希望这一切对某人来说有意义，并希望有答案。

Answer 1

您可以对这两个指令使用通用 Controller 。以下示例创建两个独立的指令，它们使用名为 ControllerOfDir1Dir2 的通用 Controller 。

var app = angular.module('app', []);
app.controller('TestController', ['$scope', function($scope){}]);

app.directive('dir1', function(){
    return {
        restrict: 'EA',
        template: '<div>Sample text of dir1</div>',
        scope: {},
        link: ControllerOfDir1Dir2
    };
});

app.directive('dir2', function(){
    return {
        restrict: 'EA',
        template: '<div>Sample text of dir2</div>',
        scope: {},
        link: ControllerOfDir1Dir2
    };
});

function ControllerOfDir1Dir2(scope, element, attr){
    // You can get the node name (dir1 or dir2) using element[0].nodeName
    var existingHtml = element.html();
    element.find('div').html(existingHtml + " And some added text");
}