AngularJS 中的嵌套和开槽 Transclude

Question

我有一个元素，它的全部内容都可以被嵌入。包含是可选的，所以我可以保留它的内部部分，但包含一个内部元素。让我们看看实际效果：

    <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

Answer 1

您在 modal-title 的后备内容中使用了另一个指令 ng-transclude。但是 ng-transclude 变成了 span 的 "parent" 并且不提供嵌入功能。我建议您修改指令并使用方法 isSlotFilled 来了解标题是否已填充：

directive('confirmDeleteModal',function(){
return {
  restrict:'E',
  transclude: {
    title:'?modalTitle',
    innerType:'?modalType',
  },
  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)

AngularJS 中的嵌套和开槽 Transclude

Nested and slotted Transclude in AngularJS

angularjs

angularjs-ng-transclude