AngularJS：动态指令，不加载模板答案

【问题标题】：AngularJS: Dynamic Directive, not loading templateAngularJS：动态指令，不加载模板
【发布时间】：2016-03-09 09:34:47
【问题描述】：

感谢您的关注。

我的 Angular 专业知识处于中等水平，我正在尝试制作动态指令/小部件。

我的脖子很疼，我正在尝试自己解决这个问题，但我需要有人为我指明正确的方向。

我有一个指令：

(function () {
  'use strict';

  angular.module('app')
    .directive('tool', function() {
      return {
        restrict: 'E',
        templateUrl: 'tool-template.html'
      }
    })
  ;
})();

工具模板.html：

<div class="tool-wrap">
  <svg>
  </svg>
</div>

我正在使用主控制器将指令动态添加到视图中：

(function(){
  'use strict';

  angular.module('app')
    .controller('MainController', function(UserModel, Auth, $state, $window, $compile, $scope){
      var ctrl = this;
      var project = $(.project);

      // ...

      ctrl.btnDown = function (event) {
        switch(event.which) {
          case 1:
            project.append(add());
            break;

          default:
            break;
        }
      };

      var add = function () {
        return $compile("<tool></tool>")($scope);
      };

      // ...

    })
  ;
});

根据我收集到的信息，我需要使用 '$compile' 将新指令元素动态添加到 dom。这是正确的吗？

我遇到的问题是.. 我可以添加新的 HTML 元素工具标签，但是当我打开浏览器开发人员工具栏 (shift + ctrl + J) 时，工具模板的内容是' t 在工具标签内。即 div 和 svg。

我知道答案肯定很明显，但是我很苦恼，我想今天就完成这项工作。

【问题讨论】：

我刚刚在阅读相关问题，是否需要运行 $scope.apply()？

标签： angularjs

【解决方案1】：

这是我使用的解决方案：

var dir = angular.element(document.createElement("DirectiveName"));
var el = $compile(dir)($scope);
var box = "#NameOfContainer";
angular.element(box).append(dir);

将指令创建为元素
编译指令并赋予其作用域
选择要添加指令的元素
将编译后的元素附加到您选择的元素中

Plunker 示例：https://plnkr.co/edit/0hWqZzfgWIVPrUhVGIDL?p=preview

【讨论】：

【解决方案2】：

我发现在使用指令名创建元素时（如果你的指令是驼峰式的两个单词），你需要使用连字符的格式。例如：指令名称 = 指令名称，元素名称 = 指令名称。

我还发现使用templateUrl时，它必须是完整的文件路径。 “app/main/tool-template.html”

【讨论】：