Javascript AngularJS：初始化Zurb基金会JS 我同时使用角度JS和基础。 初始化基础JS，必须调用以下调用： $(document).foundation();

在AngularJS应用程序中进行此调用的最佳方法是什么？代码示例将不胜感激

---

此外，如果我在一个基础JS组件周围写一个指令，我如何保证基础被初始化？

< p>你可以<代码> $AppAp/<代码>，以便把它引入到角度框架中。下面是一个将

$rootScope

与

run

一起使用的示例，这也可以在具有任何

$scope

的控制器/指令内完成：

app.run(function($rootScope){
    $rootScope.$apply($(document).foundation());
});

另一个选择是：

$compile($(document).foundation())($scope);

确保在控制器/指令中包含

$compile

服务，以便以这种方式使用它。例如：

app.directive('mydirective', function($compile) {
    return {
        link: function(scope, element, attrs) {
            $compile($(document).foundation())(scope);
        }
    }
});

---

以下是我在

app.js

中的观点：

.run(function($rootScope) {
    $rootScope.$on('$viewContentLoaded', function () {
        $(document).foundation();
    });
});

---

当新视图被加载时，它将重新初始化基础（以便新视图中包含的组件也被初始化）。这样，您的控制器就不需要知道这一点。

请尝试以下代码：

app.run(function($timeout){
    $timeout(function() {
        $(document).foundation();
    }, 500);
});

---

它解决了我的问题，试图获得基础揭示工作。

< P>一个我一直使用的方法是在我的部分/模板的结尾包含一个<代码> <代码>标签。

这样，我可以只针对每个部分的新内容——而不是使基础JS重新解析整个DOM。

例如，在my header.html中：

<header id="app-header">
  <h1>Logo</h1>
  <dl class="accordion" data-accordion>
    <dd>
      <a href="#panel1">Panel 1</a>
      <div id="panel1" class="content">
        Loren Ipsum blah blah blah....
      </div>
    </dd>
  </dl>
</header>

<!-- add this tag on bottom of template / partial -->
<script>$('#app-header').foundation();</script>

标志
Loren Ipsum等等等等。。。。
$（“#应用程序标题”）.foundation（）；

---

<>特别是如果你的应用程序在页面上有很多DOM元素，这会大大提高性能。

有一个本地的Gangurjs支持为基础。退房

<强>角基础< /强>是AngularUI团队优秀的角度引导项目的一个端口，用于基础框架。

---

<> P>Script 4（或2）项目使用组件：

根据给定的博客文章，在组件中声明$作为变量，然后调用

$（document）.foundation（）在
ngOnInit（）
中为我工作

角后，构件在基础上注入DOM。
已加载。加载新组件并注入时，
基金会不知道它在那里。我们需要告诉基金会
重新初始化并再次绑定，这样这些属性就会连接起来
将上面的代码示例与run一起使用似乎不起作用。我确认使用$编译在一个控制器中将初始化基金会，简称为“$（文档）.Buffic（）”。酷，这正是我想要的，使用foundation-6Grated，您通常希望避免使用
标记污染DOM，但这实际上会使您的javascript代码更干净，并比通过
.run（）添加代码更好地分离关注点/模块化组件
或发送给您的控制器。此回答中提出的问题如何？我不确定这对您是否有用，但是现在有一个AngularJS端口，包含了一堆Foundation的javascript部分：pineconellc.github.io/angular-Foundation/I just
bower
installed
angular-Foundation
，并且似乎工作正常。默认情况下，该库不会初始化javascript组件（我在V0.3.1-2014-0819）你是正确的，它不是。相反，它允许你使用几乎所有的基础JavaScript插件。链接到角基金会不再活跃。
{ import Component } from '@angular/core';

declare let $: any;      // TO ACCESS JQUERY '$' FUNCTION

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html'
  // other stuff here
});

export class MyComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    $(document).foundation();    // CALL foundation() INITIALIZATION FUNCTION FROM HERE
  }
}