Question

我已经创建了三个插件来说明我的问题。我正在尝试创建一个AngularJS指令，它将初始化基础并将必要的javascript应用于加载的模板。起初我尝试使用ngInclude将Foundation 5导航栏添加到我网站的所有页面。当html直接应用于部分时，顶部栏按预期工作。当html被添加到指令中时，例如ngInclude，顶部栏会丢失其所有功能。我怀疑这是因为在指令添加模板后基础没有被初始化。作为一个解决方案，我创建了一个自定义指令，用于初始化基础并编译html模板。以我冻结应用程序的方式初始化基础。任何人都有解决方案吗？

尝试在不使用Angular UI的情况下实现此目的。

示例1：直接应用于视图的HTML。按预期工作，当您单击菜单下拉列表时，将显示页面。

http://plnkr.co/edit/aQc6j2W9MpRuJo822gAF?p=preview

示例2：用于将模板加载到dom的ngInclude。没有实现任何功能，当您单击菜单下拉列表时没有任何反应。

http://plnkr.co/edit/fSS3FfYKFilMXsIkYUHg?p=preview

示例3：创建单独的指令来替换将初始化基础，编译并将模板加载到DOM的ngInclude。不能提供一个plunkr因为它会冻结，但这里是代码。

.directive('testdirective', function($compile) {
    return {
    restrict: 'AE',
        templateUrl: 'partials/includes/nav.html',
        link: function(scope, element, attrs) {
                $compile($(document).foundation())(scope);
        }
    }
})

部分应用：

<div testdirective></div>

Answer 1

这样做：

link: function(scope, element, attrs) {
  $compile(element.contents())(scope);
  $(document).foundation();
}

如果编译元素本身，则创建一个无限循环：

$compile(element)(scope); //fail

始终确保只编译元素的内容：

$compile(element.contents())(scope); //win

您似乎正在编译整个文档并创建无限循环。

您可以这样做：

templateUrl: 'partials/includes/nav.html',
compile: function() {
  $(document).foundation();
}

因为模板会自动编译，所以你不必手动完成。

注意：最佳做法是注入并使用Angular的$document，它是document的包装器，有助于测试。 $($document).foundation();

在AngularJS指令中初始化Zurb Foundation 5

1 个答案: