gpt4 book ai didi

angularjs - 属性指令可以嵌入吗?

转载 作者:行者123 更新时间:2023-12-02 01:21:24 25 4
gpt4 key购买 nike

我想要开槽嵌入,我见过这样的元素指令示例:

<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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com