javascript - Angular : Using a directive within another directive

Question

我正在尝试在另一个指令中使用一个指令。具体来说，我有一个模态指令，我想传递一个表单指令，并将充当模态的主体。

<modal title='Create Story' action='Create Story' modalid='createStoryModal'>
  <new-story-form></new-story-form>
</modal>

我的模态指令:

angular.module('Storyboard').directive('modal', function(){
    return {
        restrict: 'E',
        templateUrl: 'templates/modal.html',
        link: function(scope, element, attrs){
            scope.title = attrs.title;
            scope.action = attrs.action;
            scope.modalId = attrs.modalid;
        }
    };
});

我的模态模板:

<div class="modal fade" id="{{modalId}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">{{title}}</h4>
      </div>
      <div class="modal-body">
      <!-- INSERT FORM DIRECTIVE HERE -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" ng-click="doSomething()">{{action}}</button>
      </div>
    </div>
  </div>
</div>

我的表单指令:

angular.module("Storyboard").directive("newStoryForm", function(){
    return {
        restrict: "E",
        template: "<form><input type='text'/></form>",
        link: function(scope, element, attrs){
        }
    };
});

这是我自己构建的第一个项目，因此我还不能 100% 确定 Angular 中可用的所有技术。有人能指出我正确的方向吗？谢谢

Answer 1

您需要的是 Angular 嵌入:https://docs.angularjs.org/api/ng/directive/ngTransclude

在模态指令中，启用嵌入:

angular.module('Storyboard').directive('modal', function(){
    return {
        restrict: 'E',
        transclude: true,
        templateUrl: 'templates/modal.html',
        link: function(scope, element, attrs){
            scope.title = attrs.title;
            scope.action = attrs.action;
            scope.modalId = attrs.modalid;
        }
    };
});

在模态模板中，将 ng-transclude 放在要插入内容的位置:

<div class="modal-body">
     <ng-transclude></ng-transclude>
</div>