0

アンギュラーとファンデーションの干渉によるバグに直面しています。

基本的に、ドキュメントで提供されている例をコピーして貼り付けただけです。

Check me to check both: <input type="checkbox" ng-model="master"><br/>
<input id="checkSlave" type="checkbox" ng-checked="master">

2 つのケース:

  • 私が持っているとき$(document).foundation();：素敵なデザイン、例がうまくいかない

  • 私がコメントするとき$(document).foundation();：これ以上の基礎の良さ、例は機能しません

財団によって追加された追加のマークアップが原因だと思いますが、それでもあまり役に立ちません.

両方を取得する方法を探しています...この問題に遭遇した方はいますか?

4

2 に答える 2

1

.foundation()Angular が作成するまで DOM 要素は実際には存在しないため、Angular 駆動型 DOM の ようにライブラリ初期化子を呼び出すことはできません。

これは、クライアント側の MVC フレームワークの主要なスピード バンプですが、この種の機能を実現したいと考えているのはあなただけではないことをご安心ください。

Angular で Foundation を使用する適切な方法は、そのウィジェットをDirectivesでラップすることです。

役立つリソースを次に示します。

于 2013-07-12T19:22:13.467 に答える
0

ng-checked を使用する代わりにカスタム ディレクティブを作成できます。これにより、財団の追加マークアップが処理されます。それは怠惰な方法ではないかもしれませんが、基盤の実装などについてあまりにも多くのことを知っているので、問題を解決します.

元のブログ投稿のディレクティブ スニペット 

directive('ngCheckedFoundation',['$timeout', function($timeout) {
    function markCheckBox(value, scope, element, attr) {
        //timeout to avoid the foundation javascript action changed by this directive
        $timeout(function() {
                if(value) {
                    attr.$set("checked", true);
                    element.next().addClass('checked');
                }
                else {
                    attr.$set("checked", false);
                    element.next().removeClass('checked');
                }
        }, 200);
    }

    function link (scope, element, attr, ctrl) {
        scope.$watch(attr["ngCheckedFoundation"], function(n,o) {
          if(n != o) {
            markCheckBox(n, scope, element, attr);
          }
        });
        markCheckBox(scope.$eval(attr.ngCheckedFoundation), scope, element, attr);
    }

    return({
        link: link,
        restrict: "A",
    });
}])
于 2013-11-07T06:40:43.590 に答える