angularjs - AngularJS：如何将指令插入模板？

Question

我正在尝试编写一个通用的确认屏幕。我想在各种不同的实体中重用它。每个实体都有一个不同的指令用于将其呈现到屏幕上。

有没有办法编写一个带有“指令形孔”（my-directive如下）的模板，我可以以编程方式填写？

<div>
  Are you sure you want to blah?
  <directive-from-scope value-from-scope="theValue" params-from-scope="theParams" />
</div>

Answer 1

我用内置的 ng-include 指令解决了这个问题。

假设您有一些带有getTemplateUrl()函数的指令。您可以将任何登录名放入此函数，但它基本上应该返回一个带有模板 URL 的字符串。

然后你可以在你的指令模板中做下一件事情。

<div ng-include="directiveCtrl.getTemplateUrl()"></div>

您使用的标签无关紧要，它可以是任何 HTML 标签，只需选择一个更适合您的标签即可。

现在在每个模板中你可以有任何你想要的东西：指令、带有一些控制器的 HTML 等等。

Answer 2

您可以使用以下命令创建指令transclude：

angular.module('app', []).directive('myDirective', function() {
  return {    
    restrict: 'E',
    transclude: true,    
    template: `
    <div class='borders'>
      Are you sure you want to blah?
      <div ng-transclude></div>
    </div>
    `
  };
}).controller('ctrl', function($scope){
  $scope.log = console.log;
  $scope.title = 'Simple title';
});

.borders {
  border-style: solid;
  border-width: 1px 1px 1px 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='ctrl'>
  <my-directive>
    <ul>
      <li>first</li>
      <li>second</li>
    </ul>  
    <input type='button' value='Log' ng-click="log(title)"/>
  </my-directive>
  <my-directive>
    <h4>{{title}}</h4>    
  </my-directive>
</div>