Question

我正在使用AngularJS和Foundation。

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

$(document).foundation();

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

另外，如果我要编写一个关于Foundation JS组件的指令，我怎么能确保Foundation被初始化？

Answer 1

我的观点是app.js：

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

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

Answer 2

您可以$apply代码将其带入Angular框架。以下是使用$rootScope和run的示例，这也可以在任何$scope的控制器/指令内完成：

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

另一个选项::

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

请务必在控制器/指令中包含$compile服务以便以这种方式使用它。 E.g：

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

Answer 3

原生angularJs支持基础。查看Angular Foundation。

Angular Foundation 是AngularUI团队优秀的角度引导项目的一个端口，用于Foundation框架。

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

Answer 4

我一直使用的一种方法是在部分/模板的末尾添加<script>标记。

这样，我可以定位只是每个部分的新内容 - 而不是让基础j重新解析整个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元素，这可以大大提高性能。

Answer 5

请尝试以下代码：

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

它解决了我试图让基金会透露工作的问题。

Answer 6

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

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

使用Angular，组件会在Foundation之后注入DOM 装了。加载新组件并注入时，基金会不知道它在那里。我们需要告诉基金会重新初始化并再次绑定，因此这些属性将被连接起来。 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
  }
}

AngularJS：初始化ZURB Foundation JS

6 个答案: