3

更新：完全なソリューションを備えたフィドル：http：//jsfiddle.net/langdonx/VXBHG/

KnockoutJSとAngularJSを比較対照するために、KnockoutJSインタラクティブチュートリアルを実行し、各セクションの後で、私がすでに知っていることとAngularJSリファレンスを使用してAngularJSで書き直しました。

カスタムバインディングの作成チュートリアルのステップ3に到達したとき、Angularディレクティブをスピンアップしてカスタムタグを作成するのに良い時期だと思いました。それから私は惨めに失敗しました。

私は理解できなかった2つの問題に直面しています。私は新しいフィドルを作成して、何が起こっているのか頭を包み込みました...

  • 1（フィドル）：スコーピングの問題を理解しましたが、パススルーすることは可能ng-clickですか？それを機能させる唯一の方法は、名前を変更することjqb-click です。これは少し面倒です。
  • 2（フィドル）：自分の要素に適用するとすぐに.button()、物事は奇妙になりました。私の推測では、AngularとjQueryUIの両方がHTMLを操作しているためです。span私はこれを期待していませんが、Angularは私のために独自のものを提供しているようですbutton（JavaScriptの21行目を参照）。もちろん、私が期待するjQueryUIもそうです。HTMLをハックして見栄えを良くしましたが、それ以前でも機能はありませんでした。まだスコープの問題があり、テンプレートのバインドはありません。私は何が欠けていますか？

検討すべきAngularUIプロジェクトがあることを理解しており、CSSだけでやろうとしていることをやめることができるかもしれませんが、現時点では、これが良いと考えるのではなく、ディレクティブの使用方法を学ぶことが重要です。アイディア。

4

1 に答える 1

6

パラメータを設定することでディレクティブに分離スコープを作成することも、scope設定しないことで親スコープを使用させることもできます。

from親スコープが必要ng-clickなため、このインスタンスがディレクティブ内で親スコープを使用するのが最も簡単な場合があります。

1つのトリックは$timeout、テンプレート化されたディレクティブ内でDOMを操作する前にディレクティブ内で使用して、操作前にDOMに再描画する時間を与えることです。そうしないと、要素が時間内に存在しないように見えます。

トランスクルージョンのコンパイルについて心配するのではなく、属性を使用してテキストを渡しました。linkこのようにして、テンプレートが追加され、コールバックが属性への簡単なアクセスを提供するときに、式はすでにコンパイルされています。

<jqbutton ng-click="test(3)" text="{{title}} 3"></jqbutton>

angular.module('Components', [])
    .directive('jqbutton', function ($timeout) {
    return {
        restrict: 'E', // says that this directive is only for html elements
        replace: true,        
        template: '<button></button>', 
        link: function (scope, element, attrs) {
            // turn the button into a jQuery button
            $timeout(function () {
                /* set text from attribute of custom tag*/
                element.text(attrs.text).button();
         }, 10);/* very slight delay, even using "0" works*/
        }
    };
});

デモ： http： //jsfiddle.net/gWjXc/8/

ディレクティブは非常に強力ですが、少し学習曲線もあります。また、Angularとノックアウトを比較すると、Angularはメタフレームワークであり、長期的にはノックアウトよりもはるかに柔軟性があります。

ディレクティブのスコープを理解するための非常に役立つ読み物：

https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance

于 2013-03-24T21:50:34.037 に答える