나는 슬롯 트랜스 클루 전을 원하고, 나는이 같은 요소 지침의 예를 본 적이 :지형지 물 속성을 지울 수 있습니까?
<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>