如何从 transclude 函数访问 transclusion 槽?
How do I access transclusion slots from the transclude function?
Angular 1.5 介绍 multi-slot transclusion. According to the docs:
the transclude object { slotA: '?myCustomElement' } maps elements to the slotA slot, which can be accessed via the $transclude function
不幸的是,它没有给出任何例子。它给出的唯一示例根本没有提及插槽:
$transclude(function(clone, scope) {
element.append(clone);
transcludedContent = clone;
transclusionScope = scope;
});
有人可以阐明如何使用 $transclude 函数访问每个插槽吗?
我有类似的问题,但阅读 ng-transclude 的源代码有帮助。
原来 $transclude 函数还有第三个参数,也就是槽名。
https://github.com/angular/angular.js/blob/master/src/ng/directive/ngTransclude.js#L190
简单示例:
angular.module('app', []);
angular
.module('app')
.directive('dir', function () {
return {
transclude: {
a: 'aT',
b: 'bT'
},
link: function (scope, elem, attrs, ctrl, transclude) {
transclude(function (content) {
elem.append('<div>a</div>');
elem.append(content);
}, null, 'a');
transclude(function (content) {
elem.append('<div>b</div>');
elem.append(content);
}, null, 'b');
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<div ng-app="app">
<dir>
<a-t>content of a</a-t>
<b-t>content of b</b-t>
</dir>
</div>
Angular 1.5 介绍 multi-slot transclusion. According to the docs:
the transclude object { slotA: '?myCustomElement' } maps elements to the slotA slot, which can be accessed via the $transclude function
不幸的是,它没有给出任何例子。它给出的唯一示例根本没有提及插槽:
$transclude(function(clone, scope) {
element.append(clone);
transcludedContent = clone;
transclusionScope = scope;
});
有人可以阐明如何使用 $transclude 函数访问每个插槽吗?
我有类似的问题,但阅读 ng-transclude 的源代码有帮助。 原来 $transclude 函数还有第三个参数,也就是槽名。
https://github.com/angular/angular.js/blob/master/src/ng/directive/ngTransclude.js#L190
简单示例:
angular.module('app', []);
angular
.module('app')
.directive('dir', function () {
return {
transclude: {
a: 'aT',
b: 'bT'
},
link: function (scope, elem, attrs, ctrl, transclude) {
transclude(function (content) {
elem.append('<div>a</div>');
elem.append(content);
}, null, 'a');
transclude(function (content) {
elem.append('<div>b</div>');
elem.append(content);
}, null, 'b');
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<div ng-app="app">
<dir>
<a-t>content of a</a-t>
<b-t>content of b</b-t>
</dir>
</div>