Question

我不确定它是否有可能达到我想要的效果。我将尝试用一个例子来解释它：

自定义指令：

appDirectives.directive("myTestDirective",
    function() {
        return {
            restrict: "E",
            templateUrl: "<div> Some template here... {{ testObject }} <div>",
            scope: {
                 'testObject' = '@testObject'
            }
        };
    }]);

在tempalte中使用指令：

<my-test-directive testObject="And some more here...">
    <div>
         I also want to be in the template!
    </di>
</my-test-directive>

我想要实现这个模板：

<div> Some template here... And some more here... <div>
<div>
    I also want to be in the template!
</di>

Answer 1

您可以使用transclusion执行此操作。只需在指令中添加一个参数，并在要插入内容的元素上使用ng-transclude。

你可能不得不删除一些原文，因为翻译需要一个元素来操作，但这是基本的想法。

＆＃13;

angular.module('test', [])
  .directive('myTestDirective', function() {
    return {
      restrict: "E",
      template: "<div> Some template here... {{testObject}} <div><div ng-transclude></div>",
      scope: {
        testObject: '@'
      },
      transclude: true
    };
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
  <my-test-directive test-object="And some more here...">
    <div>
      I also want to be in the template!
    </div>
  </my-test-directive>
</div>

＆＃13;

Concat模板与自定义指令模板

1 个答案: