嵌套指令未编译

Question

我创建了一个自定义指令，用于将模板加载到模态 window。模态 window 本身就是一个模板，能够毫无问题地运行我的自定义指令。加载到模式中的模板包含另一个指令，该指令使用 angular-selectize 创建一个 select 列表。这是我的指令：

var dynamicTemplate = function($templateRequest, $compile) {

    return {
      restrict: "E",

      link: function(scope, element, attrs) {

        var modalOptions = JSON.parse(attrs.modalOptions);

        $templateRequest(modalOptions.Url).then(function(html) {

          $elem = $compile(html)(scope);   
          element.append($elem);
        });

      }
    }
  }

HTML 已正确加载，但 selectize 指令未初始化。

我在 then 方法中也厌倦了这个：

element.html(html)
$compile(element.contents())(scope);

这给了我同样的结果。

我遇到的问题是我在 HTML:

编译后收到此消息

TypeError: element.selectize is not a function

这是the plunk我正在使用的。

Answer 1

如果您希望 angular.element 使用 jQuery，您必须在 angular 加载之前在页面中包含 jQuery。

更改脚本顺序后演示可以正常工作

Updated demo

Answer 2

第一个解决方案

您必须在 index.html 中的 Angular.js 之前包含 jQuery.js。这个魔法使 angular.element 可以使用 jQuery。
Solution 1

第二种解决方案

您可以将第 97 行 angular-selectize.js 中的 element.selectize 替换为 $(element).selectize。这使得 angular-selectize 脚本使用 jQuery 的选择器而不是 angular 的。
Solution 2

Answer 3

在 Angular 加载之前在页面中包含 jQuery。然后 angular.element 将使用 jQuery。

嵌套指令未编译

Nested directive not compiling

angularjs

angularjs-directive

selectize.js

第一个解决方案

第二种解决方案