从指令范围访问Angular工厂

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)函数，用于返回按特定键排序的有限设备集。

编辑：更多信息

这样做的目的是创建一个模板，该模板可以按某些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

如果这是Angular工厂，则可以将其作为依赖项传递给指令：

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是controller中的控制器作为语法，您可以将工厂方法附加到controller

// 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模板中使用sort函数：

topDevices.tpl.html

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

不是最聪明的例子，但您明白了

您也可以查看此相关答案

还有另一种传递函数的方式

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

然后，在“链接”功能中，您可以像这样使用它

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

小注释-在您的示例中，您无法在使用它们的位置访问“ this.count”和“ this.sortKey”：
1.它们尚未定义。 2.“ this”未引用作用域对象。

编辑实现目标的一种方法是使用过滤器：查看此小提琴以查看基本实现。 也许已经有一个内置的过滤器可以帮助您做到这一点。 过滤器可以组合：

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