我想要开槽嵌入，我见过这样的元素指令示例:
<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>关于angularjs - 属性指令可以嵌入吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40047463/