Question

感谢您的关注。

我在Angular专有技术中处于中间位置，我试图制作动态指令/小部件。

我脖子里出了很大的头痛，我试图自己解决这个问题，但是我需要有人指出我正确的方向。

我有一个指令：

(function () {
  'use strict';

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

工具template.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);
      };

      // ...

    })
  ;
});

从我收集的内容中我需要使用＆＃39; $ compile＆＃39;动态地将新的指令元素添加到dom中。这是对的吗？

我遇到的问题是..我能够添加新的HTML元素工具标签，但是当我打开浏览器开发工具栏（shift + ctrl + J）时，工具的内容-template不在工具标签内。即div和svg。

我理解答案必须非常明显，但是，我很挣扎，我想今天完成这项工作。

Answer 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

Answer 2

我发现在使用指令名创建元素时（如果你的指令是camelcase中的两个单词），你需要使用带连字符的格式。例如：Directive name = directiveName，Element name = directive-name。

我还发现在使用templateUrl时，它必须是完整的文件路径。＆＃34;应用程序/主/工具template.html＆＃34;

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

2 个答案: