Question

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

有没有办法编写一个带有“指令形状的洞”（下面docker restart $(docker ps -aq)）的模板，我可以通过编程方式填写？

my-directive

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>

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

2 个答案: