角度ライト。 HTMLでの宣言型データバインディングの管理

Angularには、DOMに情報を表示するための2つのツールがあります。これらはHTML {{model}}のディレクティブと宣言的なデータバインディングです。

ディレクティブは非常に強力ですが、宣言バインディングは少し制限されています。これにより、フィルターを呼び出す機能を備えたモデルを監視することができます。 そして、もっと柔軟性が欲しいです。



たとえば、Angular.jsのbindonceライブラリを見ると、主なアイデアは、$ watchを使用しない1回限りの情報出力です。

そして、それをどこでも、どの属性でも使用するために、開発者はいくつかの個別のディレクティブを作成しました： bo-text、bo-href-i、bo-href、bo-src-i、bo-src、bo- class、bo-alt、bo-title、bo-id、bo-style、bo-value、bo-attrおよびbo-attr-foo しかし、実際には、それらはすべて同じことを行い、論理的には、これは1つのディレクティブである必要があります。

また、Angular.jsで考案された宣言型データバインディング、つまり、 の代わりに

<a href="{{link}}">{{name}}</a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

書く必要があります

 <a bo-href-i="{{link}}" bo-text="name"></a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

つまり 宣言型データバインディングが発明された理由は、この状況では機能しません。



そのため、宣言型データバインディングのディレクティブを実装するというアイデアが生まれました。

Angular Lightでの動作-ディレクティブの名前を指定し、その前に「＃」記号を付けるだけです。 {{model}}の代わりに{{ #directive model}}があります。

役に立たないが単純なカウンターの例：

 <div al-app> counter {{#counter model}} </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

「model」バインディングを実行し、「counter」ディレクティブを接続します。簡単にするため、このディレクティブでは「model」の使用を省略しました。

 alight.text.counter = function(callback, expression, scope, env) { var n = 0; setInterval(function(){ n++; callback(n) // set result scope.$scan() // $digest }, 1000); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ディレクティブの入力で取得するもの：

• コールバック-bindigの場所にテキストを送信できません
• expression-バインディングの入力式。この場合は「モデル」です
• スコープ-現在のスコープ
• env-バインディングの「内部」へのリンクおよび機能の拡張

仕組みの例



以下は、サーバーからのデータのロードを「シミュレート」するディレクティブloadLoginByIdにbindigを属性に挿入する例です。

 <div al-app al-init="user_id = '555'"> id = <input type="text" al-value="user_id" /> <br/> into href = <a href="http://example.com/?search={{#loadLoginById user_id}}">user's page</a> <br/> into title = <span title="{{#loadLoginById user_id}}">user</a> <br/> into text = {{#loadLoginById user_id}} </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例



最後に、 bindonceを使用した例で、bind-onceライブラリの11を置き換えるディレクティブが1つあります。

 <div al-app al-init="link = 'google.com'"> id = <input type="text" al-value="link" /> <br/> usual, with $watch = <a href="http://{{link}}">{{link}}</a> <br/> bindonce = <a href="http://{{#bindonce link}}">{{#bindonce link}}</a> <br/> aliase of bindonce = <a href="http://{{=link}}">{{=link}}</a> <br/> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例



情報の便利な結論のために宣言的バインディングが考えられたら、それを最大限に活用してみませんか？