AngularJS 多槽嵌入
AngularJS Multi-slot transclusion
我正在尝试在 AngularJS 1.5.8 中实现一个具有多槽嵌入的组件。
如果我使用指令,我的测试工作正常,但是对于一个组件,似乎连插槽都找不到!。
这是我声明组件的方式
app.component('asComponent', function() {
return {
transclude: {
'title': '?paneTitle',
'body': 'paneBody',
'footer': '?paneFooter'
},
template: `<h1>I am a component</h1>
<div style="border: 2px solid red;">
<div class="title" ng-transclude="title">Fallback Title</div>
<div ng-transclude="body"></div>
<div class="footer" ng-transclude="footer">Fallback Footer</div>
</div>`
}});
app.controller('ExampleController', [ function() {
var vm = this;
vm.title = 'Lorem Ipsum';
vm.link = 'https://google.com';
vm.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}]);
这里是 HTML
<div ng-controller="ExampleController as $ctrl" class="container">
<as-component>
<pane-title>
<a ng-href="{{$ctrl.link}}">{{title}}</a>
</pane-title>
<pane-body>
<p>{{$ctrl.text}}</p>
</pane-body>
</as-component>
</div>
Official AngularJS documentation says
在AngularJS中,组件是一种特殊类型的指令,它使用更简单的配置,适用于基于组件的应用程序结构.
如果是这种情况,那么多槽嵌入也应该与组件完美配合。
我知道我遗漏了什么,但我看不到它是什么!
我用一个指令和一个组件创建了一个小的 Plunker。
https://plnkr.co/edit/yTMRD4SrH8CWLK4LQEwe?p=info
谢谢
对于组件,使用对象(不是函数):
app.component('asComponent', {
transclude: {
'title': '?paneTitle',
'body': 'paneBody',
'footer': '?paneFooter'
},
template: `<h1>I am a component</h1>
<div style="border: 2px solid red;">
<div class="title" ng-transclude="title">Fallback Title</div>
<div ng-transclude="body"></div>
<div class="footer" ng-transclude="footer">Fallback Footer</div>
</div>`
});
此外,您在 {{ title }}
中缺少 $ctrl
。应该是:
<a ng-href="{{$ctrl.link}}">{{$ctrl.title}}</a>
这里是 plnkr。
我根本无法让多槽工作!我很难过,尝试了多个 angular 版本,直到 1.8.2
输出总是重复的。命名插槽被忽略了吗?
<as-directive>
<pane-title>Title</pane-title>
<pane-body>Text</pane-body>
</as-directive>
.directive('asDirective', [function () {
return {
restrict: 'E',
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>'
}
}]);
输出:
<div style="border: 1px solid black;"><div class="title" ng-transclude="title">
<pane-title class="ng-scope">Title</pane-title>
<pane-body class="ng-scope">Text</pane-body>
</div> <div ng-transclude="body">
<pane-title class="ng-scope">Title</pane-title>
<pane-body class="ng-scope">Text</pane-body>
</div><div class="footer" ng-transclude="footer">
<pane-title class="ng-scope">Title</pane-title>
<pane-body class="ng-scope">Text</pane-body>
</div></div>
我正在尝试在 AngularJS 1.5.8 中实现一个具有多槽嵌入的组件。
如果我使用指令,我的测试工作正常,但是对于一个组件,似乎连插槽都找不到!。
这是我声明组件的方式
app.component('asComponent', function() {
return {
transclude: {
'title': '?paneTitle',
'body': 'paneBody',
'footer': '?paneFooter'
},
template: `<h1>I am a component</h1>
<div style="border: 2px solid red;">
<div class="title" ng-transclude="title">Fallback Title</div>
<div ng-transclude="body"></div>
<div class="footer" ng-transclude="footer">Fallback Footer</div>
</div>`
}});
app.controller('ExampleController', [ function() {
var vm = this;
vm.title = 'Lorem Ipsum';
vm.link = 'https://google.com';
vm.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}]);
这里是 HTML
<div ng-controller="ExampleController as $ctrl" class="container">
<as-component>
<pane-title>
<a ng-href="{{$ctrl.link}}">{{title}}</a>
</pane-title>
<pane-body>
<p>{{$ctrl.text}}</p>
</pane-body>
</as-component>
</div>
Official AngularJS documentation says
在AngularJS中,组件是一种特殊类型的指令,它使用更简单的配置,适用于基于组件的应用程序结构.
如果是这种情况,那么多槽嵌入也应该与组件完美配合。
我知道我遗漏了什么,但我看不到它是什么!
我用一个指令和一个组件创建了一个小的 Plunker。
https://plnkr.co/edit/yTMRD4SrH8CWLK4LQEwe?p=info
谢谢
对于组件,使用对象(不是函数):
app.component('asComponent', {
transclude: {
'title': '?paneTitle',
'body': 'paneBody',
'footer': '?paneFooter'
},
template: `<h1>I am a component</h1>
<div style="border: 2px solid red;">
<div class="title" ng-transclude="title">Fallback Title</div>
<div ng-transclude="body"></div>
<div class="footer" ng-transclude="footer">Fallback Footer</div>
</div>`
});
此外,您在 {{ title }}
中缺少 $ctrl
。应该是:
<a ng-href="{{$ctrl.link}}">{{$ctrl.title}}</a>
这里是 plnkr。
我根本无法让多槽工作!我很难过,尝试了多个 angular 版本,直到 1.8.2
输出总是重复的。命名插槽被忽略了吗?
<as-directive>
<pane-title>Title</pane-title>
<pane-body>Text</pane-body>
</as-directive>
.directive('asDirective', [function () {
return {
restrict: 'E',
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>'
}
}]);
输出:
<div style="border: 1px solid black;"><div class="title" ng-transclude="title">
<pane-title class="ng-scope">Title</pane-title>
<pane-body class="ng-scope">Text</pane-body>
</div> <div ng-transclude="body">
<pane-title class="ng-scope">Title</pane-title>
<pane-body class="ng-scope">Text</pane-body>
</div><div class="footer" ng-transclude="footer">
<pane-title class="ng-scope">Title</pane-title>
<pane-body class="ng-scope">Text</pane-body>
</div></div>