web-dev-qa-db-ja.com

AngularJS：ZURB FoundationJSを初期化します

私はAngularJSとFoundationの両方を使用しています。

Foundation JSを初期化するには、次の呼び出しを行う必要があります。

$(document).foundation();

AngularJSアプリケーションでこの呼び出しを行うための最良の方法は何でしょうか？コード例をいただければ幸いです。

また、Foundation JSコンポーネントに関するディレクティブを作成する場合、Foundationが初期化されていることを確認するにはどうすればよいですか？

javascriptangularjszurb-foundation
29
Tyson Nero

コードをAngularフレームワークに取り込むために、コードを$applyすることができます。これは$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);
        }
    }
});
15
Dan

これが私の見解です、app.js：

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

これにより、新しいビューがロードされたときにFoundationが再初期化されます（新しいビューに含まれるコンポーネントも初期化されます）。このように、コントローラーはこれを認識する必要はありません。

38
Paul Mougel

基盤にはネイティブのangularJsサポートがあります。チェックアウト Angular Foundation 。

Angular Foundationは、Foundationフレームワークで使用するためのAngularUIチームの優れたangular-bootstrapプロジェクトのポートです。

依存関係はありませんが、angularライブラリ自体とFoundationCSSのみです。

4
Muhammad Reda

私が使用している方法の1つは、パーシャル/テンプレートの最後に<script>タグを含めることです。

このようにして、Foundation jsにDOM全体を再解析させる代わりに、target各パーシャルの新しいコンテンツだけを-できます。

たとえば、私の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要素が多数ある場合、これによりパフォーマンスが大幅に向上する可能性があります。

3
jlee

次のコードを試してください。

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

Foundationの公開を機能させようとする私の問題は解決しました。

2
Muhammad Reda

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
  }
}
0
balazs630