使用ng-transclude進行指令通信的指令並要求

Question

我有兩個指令，可以說：

angular.module('app').directive('directiveA', directiveA);

    function directiveA(){
        return {
            restrict: 'E',
            transclude: true,
            scope: {},
            templateUrl: 'directiveA.html',
            controller: function($scope){
                $scope.test="test data";
            }
        };
    }

第二個：

angular.module('app').directive('directiveB', directiveB);

function directiveB(){
    return {
        restrict: 'E',
        require: '^directiveA',
        transclude: true,
        scope: {},
        templateUrl: 'directiveB.html',
        link: function(scope, elem, attrs, directiveAController) {
            console.log("directiveB linked");
        }
    };
}

指令A的HTML：

<div>
<!-- something here -->
    <div ng-transclude></div>
</div>

指令B的HTML：

<div>{{test}}</div>

我想這樣使用它們：

<directive-a>
     <directive-b></directive-b>
</directive-a>

如何使它們使用require和ng-transclude相互通信並同時渲染兩個模板？ 例如，我想從指令B模板中的指令A打印測試變量。 我是指令和包容性的新手。

Answer 1

您可以選擇一些通訊方式：

1. 使用$broadcast或$emit取決於您的范圍。 看到這個問題 。 在這里向$rootScope發出消息是一件好事，因為所有孩子都可以收聽事件。
2. 使用回調函數（僅適用於子指令）。
3. 觀察者模式 。

請參閱下面或此jsfiddle中的演示代碼。

 angular.module('demoApp', []) .controller('mainController', function($scope) { }) .service('interDirCom', function() { // observer pattern var self = this; angular.extend(this, { subscribers: [], subscriberCount: 0, newSubscriber: function(callback) { return { id: self.subscriberCount++, notify: callback }; }, subscribe: function(callback) { //add listener var subscriber = self.newSubscriber(callback); self.subscribers.push(subscriber); }, notify: function(message){ console.log('notify', this, self, self.subscribers); angular.forEach(self.subscribers, function(subscriber) { console.log(subscriber, message); subscriber.notify(message); }); } }); //return service; }) .directive('directiveA', directiveA) .directive('directiveB', directiveB); function directiveA() { return { restrict: 'E', transclude: true, scope: {}, templateUrl: 'directiveA.html', controller: function ($scope, $rootScope, interDirCom) { interDirCom.subscribe(function(message) { //console.log('callback of subscriber called'); $scope.test2 = message; }); $scope.test = "test data"; this.test = 'hello from controller A in dir. B'; $rootScope.$on('dirB:test', function(evt, data) { console.log('received event', data); $scope.test = data.message; }); this.callback = function(message) { $scope.test2 = message; }; } }; } function directiveB(interDirCom) { return { restrict: 'E', require: '^directiveA', transclude: true, scope: {}, templateUrl: 'directiveB.html', link: function (scope, elem, attrs, directiveACtrl) { console.log("directiveB linked"); //scope.test = "hello from B"; scope.test = directiveACtrl.test; scope.$emit('dirB:test', {message: 'Hello from directive B in dir. A with a $emit to $rootScope'}); directiveACtrl.callback('I am added with a callback function from dir. B. to dir. A'); interDirCom.notify('Message from dir. B with observer pattern'); console.log(interDirCom); } }; } 

 directive-b div{ background-color: green !important; } directive-a>div{ background-color: lightgray; border: 2px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="demoApp" ng-controller="mainController"> <script type="text/ng-template" id="directiveA.html"> <div> <h1>Directive A</h1> {{test}}<br/> {{test2}} <!-- something here --> <div ng-transclude></div> </div> </script> <script type="text/ng-template" id="directiveB.html"> <div> <h1>Directive B</h1> <div>{{test}}</div> <div>{{test2}}</div> </div> </script> <directive-a> <directive-b></directive-b> </directive-a> </div>