從指令範圍訪問Angular Factory

Question

我對Angular很新，所以也許這不是解決問題的最佳方法。我試圖從指令topDevices範圍訪問名爲Devices的工廠。

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)函數返回按特定鍵排序的有限設備。

編輯：更多信息

這樣做的目的是創建一個模板，可以列出，例如，前5個設備通過一些X度量。模板是這樣的：

<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> 

請注意，這不是調用函數，因爲我們使用'&'屬性定義

您甚至可以在指令的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」不引用範圍對象。

編輯 一個才達到你的目標的方法是使用一個過濾器： 退房this fiddle看到基本實現。 或者也許已經有一個內置的過濾器，可以幫助你做到這一點。 過濾器可以被組合：

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