30

我同时使用 AngularJS 和 Foundation。

要初始化 Foundation JS，您必须进行以下调用：

$(document).foundation();

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

另外，如果我要围绕 Foundation JS 组件编写指令，我如何确保 Foundation 已初始化？

4

6 回答 6

38

这是我的看法，在app.js：

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

这将在加载新视图时重新初始化 Foundation（以便新视图中包含的组件也被初始化）。这样，您的控制器就不需要意识到这一点。

于 2013-06-28T14:33:20.977 回答
15

您可以$apply编写代码以将其引入 Angular 框架。这是一个使用$rootScopewith的示例run，这也可以在带有 any 的控制器/指令内完成$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);
        }
    }
});
于 2013-05-25T19:28:53.090 回答
4

有对基础的原生 angularJs 支持。查看Angular 基础。

Angular Foundation是 AngularUI 团队出色的 angular-bootstrap 项目的一个端口，用于 Foundation 框架。

它没有依赖关系，只有角度库本身和基础 CSS。

于 2014-07-06T08:17:28.930 回答
3

我一直在使用的一种方法是<script>在部分/模板的末尾包含一个标签。

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

例如，在我的 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>

特别是如果您的应用在页面上有很多 DOM 元素，这可以显着提高性能。

于 2014-03-19T16:43:15.653 回答
2

试试下面的代码：

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

它解决了我试图让 Foundation 揭示工作的问题。

于 2013-12-17T07:46:45.023 回答
0

对于使用组件的 TypeScript Angular 4（或 2）项目：

根据给定的博客文章，将 $ 声明为组件中的变量，然后调用$(document).foundation();为ngOnInit()我工作！

使用 Angular，组件在 Foundation 加载后被注入到 DOM 中。当你加载一个新组件并注入它时，Foundation 并不知道它在那里。我们需要告诉 Foundation 重新初始化并再次绑定，这样这些属性就会被连接起来。http://justindavis.co/2017/06/15/using-foundation-6-in-angular-4/

{ 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
  }
}
于 2017-10-12T12:48:15.250 回答