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

编辑：更多信息

这样做的目的是创建一个模板，例如，可以通过某个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（）方法，并在指令的隔离范围内使用它，则应使用“＆amp;”定义范围属性。或'='值。

使用'='创建双向数据绑定，这是最容易掌握的：

 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);
 }

我会尝试使用'＆amp;'来解释：

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
        });
    }

}）;

正如您所看到的，该函数以不同的方式调用 - ＆gt;传递一个对象，哪些键是参数名称及其对应的值

然后使用指令：

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

请注意，这不是调用函数，因为我们使用'＆amp;'属性定义

您甚至可以在指令的html模板中使用sort函数：

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'：
它们尚未确定。 2.“这个”没有引用范围对象。

编辑实现目标的一种方法是使用过滤器：查看this fiddle以查看基本实施。或者也许已经有一个内置的过滤器可以帮助你做到这一点。可以组合过滤器：

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

从指令范围访问角度工厂

1 个答案: