Question

我试图深入研究范围，在通过大量博客挖掘后，堆栈溢出答案和文档仍然卡住了。

angular.module('app', [])
  .factory('alphabet', function () {
    data = [
      'c', 
      'b',
      'a'
    ];

    return {
      get : function () {
        return data;
      },
      set : function (val) {
        data.push(val);
      }
    };
  })
  .controller('AlphaCtrl', function (alphabet) {
    this.alphabet = alphabet;
  })
  .directive('sortableTable', function () {
    return {
      scope : {
         "param" : '@'
      },

      link : function (scope) {
        console.log(scope.param);
      }
    };
  })
;

HTML：

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div ng-controller="AlphaCtrl as alpha">
    <table sortable-table param="{{alpha.alphabet}}">
      <thead>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</body>
</html>

我想要做的是能够从指令中访问外部控制器中使用的服务/工厂。因此，例如，当我处理点击事件时，我可以向数据添加项目。这似乎是保持事物分离的好方法，但我愿意接受那些建议。

眼前的问题是＆＃39; param＆＃39;未定义。我也试过使用＆＃39;＆amp;＆＃39;但那对我没有做任何事情。有人能让我走上Angular正义的道路吗？

Answer 1

我会将服务直接注入指令：

.directive('sortableTable', function (alphabet) {
   return {
     scope : {},

     link : function (scope) {
       console.log(alphabet);
     }
   };
})

如果这是一个跨控制器和视图使用的指令，这确实是保持事物解耦的好方法。

编辑更复杂的解决方案 可以通过将服务注入指令范围来实现，但如果你不建议我这样做不需要动态切换服务，因为上述方法更容易。我可以看到一些用例，例如，如果你想在另一个控制器中输入不同的服务（具有相同的get / set结构）。以下是通过范围实现的方法：

.controller('myController', function($scope, alphabet) { $scope.alphabet = alphabet; }) .directive('myDirective', function(){ return { scope: { service: '=' }, template: '<div ng-bind="service.get()"></div>' } })

在模板中：

<div data-my-directive service="alphabet"></div>

这里的技巧是使用service: '='，因为这会在控制器中的scope-variable（绑定到服务）和指令中的scope-variable之间创建双向绑定。 http://jsfiddle.net/vt52bauu/2/

Answer 2

我不认为get / set将按照您在Angular工厂期望的方式工作。

this.alphabet = alphabet.get();

AngularJS - 如何在指令中使用服务

2 个答案: