0

私には2つのディレクティブがあります。

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

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

そして2つ目:

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 を使用して相互に通信させ、両方のテンプレートをレンダリングさせるにはどうすればよいですか? たとえば、directiveB テンプレートの directiveA からテスト変数を出力したいと思います。私はディレクティブとトランスクルージョンが初めてです。

4

1 に答える 1