【问题标题】：Nested directive not compiling嵌套指令未编译
【发布时间】：2016-01-13 03:30:30
【问题描述】：

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

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 我正在使用。

【问题讨论】：

标签： angularjs angularjs-directive selectize.js

【解决方案1】：

如果你想让angular.element 使用 jQuery，你必须在页面加载之前包含 jQuery。

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

Updated demo

【讨论】：

【解决方案2】：

第一个解决方案

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

第二种解决方案

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

【讨论】：

【解决方案3】：

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

【讨论】：