javascript - AngularJS 指令使用 templateURL 加载模板

Question

我正在尝试创建一个指令，它将动态地将模板内容添加到 DOM 中。就像 Angular-datePicker 一样。

我希望有这样一个指令作为属性指令。例如，我会用它作为按钮。单击按钮时，会显示表单。从技术上讲，我正在考虑使用链接函数，将回调绑定(bind)到元素 onClick 事件，并使用 element.insertAfter 方法在该回调中添加模板内容。

问题是，我无权访问 templateURL 加载的模板。第二个问题是属性指令的默认行为 - 它自动将模板附加为元素的子元素。有什么办法可以禁用它吗？

Answer 1

听起来您想要更多的自定义行为，并且这在您的指令中编写脚本非常容易。

基本步骤:

1. 使用 $http 服务获取模板
2. compile模板 - 引用范围

3. 将模板插入到 DOM 中任意位置

   angular.module('myModule').directive('myDirective', function ($http, $compile) {
       var directive = {};
   
       directive.restrict = 'A';
       directive.link = function (scope, elem, attr) {
           var templateString = '';
   
           $http.get('[ path to template ]').then(function (response) {
               templateString = response.data;
   
               var compiledHtml = $compile(templateString)(scope); // compile with scope variables
   
               element.append(compiledHtml); // change this around to insert your element into the DOM
           });
   
       };
   
       return directive;
   });