私は溝付きトランスクルーをしたい、と私はこのような要素のディレクティブの例を見てきました：属性ディレクティブは、
<my-directive>
<slot-a></slot-a>
<slot-b></slot-b>
</my-directive>
私はそれが要素ディレクティブでなければならないかどうかを知りたいです。私は次のようなことをしたい：
<div my-directive>
<slot-a></slot-a>
<slot-b></slot-b>
</div>
これは可能ですか？私はそれを行うことができるかできないと言ういかなる文書も見つけることができない。
AngularJSの最近のバージョンでは、明らかに—を使用できます。以下のスニペットは、multi-slot transclusionセクションの要素ディレクティブのバリエーションです。
(function(angular) {
'use strict';
angular.module('multiSlotTranscludeExample', [])
.directive('pane', function() {
return {
restrict: 'A',
transclude: {
'title': '?paneTitle',
'body': 'paneBody',
'footer': '?paneFooter'
},
template: '<div style="border: 1px solid black;">' +
'<div class="title" ng-transclude="title">Fallback Title</div>' +
'<div ng-transclude="body"></div>' +
'<div class="footer" ng-transclude="footer">Fallback Footer</div>' +
'</div>'
};
})
.controller('ExampleController', ['$scope',
function($scope) {
$scope.title = 'Lorem Ipsum';
$scope.link = 'https://google.com';
$scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}
]);
})(window.angular);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<body ng-app="multiSlotTranscludeExample">
<style>
.title,
.footer {
background-color: gray
}
</style>
<div ng-controller="ExampleController">
<input ng-model="title" aria-label="title">
<br/>
<textarea ng-model="text" aria-label="text"></textarea>
<br/>
<div pane>
<pane-title>
<a ng-href="{{link}}" ng-bind="title"></a>
</pane-title>
<pane-body>
<p ng-bind="text"></p>
</pane-body>
</div>
</div>
</body>