Question

通常，当我创建指令时，我有两种可能的方法来处理指令模板。我可以在我的服务器上的某个地方创建一个html文件，并在指令设置中使用它的URL：

@directives.directive "someDirective", [
  '$rootScope'
  ($rootScope) ->

    controller: ($scope) ->

    link: (scope, element, attrs) ->
      return

    restrict: 'A'
    templateUrl: 'path/to/template.html'
    scope: {
      eventId: '@'
    }
]

或者我可以将脚本标记放在标记中的某个位置并使用它的ID作为templateUrl：

<script type="text/ng-template" id="template.html">
  <p>Hello {{ name }}</p>
</script>

但是，我想知道 - 是否有可能将该模板作为指令容器标签的一部分？这就是我想要的样子：

<div my-ng-directive>
  <p>Hello {{ name }}</p>
</div>

Answer 1

我认为您正在寻找的是ng-transclude，

基本上ng-transclude允许你创建＆＃34;创建＆＃34;原始模板中包含原始html元素内容的插槽，因此在您的示例中，执行所需操作的基本指令将如下所示：

angular.module('myModule', [])
  .directive('myNgDirective', function() {
    return {
      controller: function($scope) {
         $scope.name = "Test";
      },
      transclude: true,
      restrict: 'A',
      template: '<div><h1>The directive</h1><div ng-transclude></div></div>'
    }
  });

此代码：

<div my-ng-directive>
  <p>Hello {{ name }}</p>
</div>

将返回：

<div>
  <h1>The directive</h1>
  <div>
     <p>Hello {{ name }}</p>
  </div>
</div>

将指令模板作为附加指令的容器的内容

1 个答案: