ディレクティブスコープから角型工場へのアクセス

Question

私はAngularを初めて熟知しているので、これは問題に近づく最良の方法ではないかもしれません。 Devicesというファクトリに、topDevicesスコープと呼ばれるディレクティブからアクセスしようとしています。

topDevices.js：

app.directive('topDevices', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      count: '@', 
      sortKey: '@', 
      devices: Devices.sortByKey(this.count, this.sortKey) 
     }, 
     templateUrl: 'app/directives/topDevices.tpl.html' 
    } 
}); 

は、この通常は許可されていない何かまたはちょうど悪い習慣/アプローチですか？ DevicesにはDevices.all()を使用するデバイスのリストが含まれていますが、特定のキーでソートされた限定されたデバイスセットを返すためのDevices.sortByKey(count, key)機能もあります。

EDIT：詳細情報

これの目的は、いくつかのXメトリックによって、例えば、トップ5のデバイスを一覧表示することができ、テンプレートを作成することです。テンプレートはこれです：

<h3>Top {{ count }} by {{ sortKey }}</h3> 
    <table class="table table-bordered table-condensed table-striped table-hover"> 
     <tbody> 
      <tr ng-repeat="device in devices"> 
       <td>{{ device.id }}</td> 
       <td>{{ device.name }}</td> 
       <td>{{ device[sortKey] }}</td> 
      </tr> 
      <tr ng-show="!devices.length"> 
       <td colspan="3">No device info available</td> 
      </tr> 
     </tbody> 
    </table> 

Answer 1

これは角の工場である場合は、依存関係としてディレクティブにそれを渡すことができます：

app.directive('topDevices', function(Devices) {...}) 

あなたが

を使用している具体的なインスタンスからデカップリングされている。この方法

一方、sortByKey（）メソッドを渡し、ディレクティブの分離スコープで使用する場合は、スコーププロパティを '&'または '='値で定義する必要があります。

'='結合する双方向データを作成し使用

、それは把握する最も簡単です：

app.directive('topDevices', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     count: '@', 
     sortKey: '@', 
     sort: '=' 
    }, 

    templateUrl: 'app/directives/topDevices.tpl.html' 
    }, 
    link: function(scope) { 
     scope.sort(scope.count, scope.sortKey); 
    } 

}）。

それは
その後、あなたはディレクティブを使用する場所に作成されたときのディレクティブのlinkメソッドが実行されます。

<top-devices sort="ctrl.sortByKey"></top-devices> 

CTRLはcontrollerAs構文からコントローラである、あなたは工場出荷時の方法を添付することができます私は「&」を使って説明しよう

// inside a controller 
this.sortByKey = function(count, sortKey) { 
    return Device.sortByKey(count, sortKey); 
} 

のようなコントローラ：

app.directive('topDevices', function() { 
return { 
    restrict: 'E', 
    scope: { 
     count: '@', 
     sortKey: '@', 
     sort: '&' 
    }, 

    templateUrl: 'app/directives/topDevices.tpl.html' 
    }, 
    link: function(scope) { 
     scope.sort({ 
      count: scope.count,  
      sortKey: scope.sortKey 
     }); 
    } 

}）。

あなたは機能が異なる方法で呼ばれて見ることができるように - キーは、引数名とその対応する値あなたはディレクティブを使用すると

あるオブジェクト渡し>：

<top-devices sort="ctrl.sortByKey(count, sortKey)"></top-devices> 

を'&'プロパティ定義を使用したため、これは関数を呼び出さないことに注意してください。

ディレクティブの中でsort関数を使用することもできますHTMLテンプレート：

topDevices.tpl.html

<div ng-show="sort({count: count, sortKey: sortKey})"> 
    <a href="#" ng-repeat...>{{something}}</a> 
</div> 

ない明るい例が、あなたは、あなたがthis relevant answer

をチェックアウトすることができますポイント

はまた渡すための別の方法があり得ますこの

<top-devices sort="ctrl.sortByKey"></top-devices> 

のような関数

その後'link'機能であなたはこの

{ 
    ... 
    link: function(scope) { 
     var unwrapped = scope.sort(); 
     unwrapped(scope.count, scope.sortKey); 
    } 
} 

小さなサイドノートと同じように使用することができます - あなたの例では、あなたがそれらを使用している場所に'this.count'と'this.sortKey'にアクセスすることはできません：
1.彼らはまだ定義されていません。 2.'this'はスコープオブジェクトを参照しません。

編集 目標を達成する方法の1つは、フィルターを使用することです。 チェックアウトthis fiddle基本的な実装を確認してください。 それともあなたがこれを行うことができ、フィルタに内蔵され、すでに存在しています。 フィルタを組み合わせることができます

<li ng-repeat="data in collection | filter1:arg | filter2:bar | filter1:foo></li>