javascript - 从指令范围访问 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() 方法，并在指令的隔离范围内使用它，您应该使用“&”或“=”值定义一个范围属性。

使用“=”创建两种方式的数据绑定(bind)，这是最容易掌握的:

 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语法中的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 模板中使用排序功能:

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