AngularJS中的嵌套和插槽Transclude

发布时间：2020-12-17 17:07:31 所属栏目：安全来源：网络整理

导读：我有一个元素,其整个内容可以被转换.转换是可选的,所以我可以让它的内部部分保留但内部元素被转换.让我们看看它的实际效果： h4 class="modal-title" ng-transclude="title" Are you sure you want to remove this span ng-transclude="innerType"good/span

我有一个元素,其整个内容可以被转换.转换是可选的,所以我可以让它的内部部分保留但内部元素被转换.让我们看看它的实际效果：

<h4 class="modal-title" ng-transclude="title">
    Are you sure you want to remove this <span ng-transclude="innerType">good</span>
    </h4>

在指令定义中我有：

myApp.directive('confirmDeleteModal',function(){
    return {
        restrict:'E',transclude: {
           title:'?modalTitle',innerType:'?modalType',},templateUrl:'templates/confirm_delete_modal.html',scope: {
           obj:'=info',}
   });

HTML代码是这样的：

<confirm-delete-modal info="goodToBeDeleted">
     <modal-type>good</modal-type>
  </confirm-delete-modal>

当我运行我的代码时,我收到以下错误：[ngTransclude：orphan].

我该怎么办？
我正在使用AngularJS v1.5.8

解决方法

您在模态标题的后备内容中使用另一个指令ng-transclude.但是ng-transclude成为跨度的“父”并且不提供翻译功能.我建议你修改你的指令并使用方法isSlotFilled来知道标题是否被填充：

directive('confirmDeleteModal',function(){
return {
  restrict:'E',transclude: {
    title:'?modalTitle',link: function(scope,elem,attrs,ctrl,trfn) {
    scope.titleFilled = trfn.isSlotFilled('title');
  },template:'<h4 class="modal-title" ng-transclude="title" ng-if="titleFilled"></h4>' +
           '<h4 class="modal-title" ng-if="!titleFilled">Are you sure you want to remove this <span ng-transclude="innerType">good</span></h4>',scope:{
      obj:'=info',}
 }
})

(https://plnkr.co/edit/k0RXLWbOvHdNc9WFpslz?p=preview)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!