无法访问指令链接功能内部的注入服务

Question

I was trying to add a factory to an existing directive. 我试图将工厂添加到现有指令中。 Right now the feature is still being worked out, and I am still fairly new with angular but strong with JS. 目前，该功能仍在开发中，我对Angular还是很陌生，但对JS却很强。 In terms of general JS scope, everything seems like it should be fine. 就一般的JS范围而言，一切似乎应该没问题。 But, equipment and remoteTerminalFactory don't exist when it gets into the link function. 但是，设备和remoteTerminalFactory进入链接功能时不存在。 I added a variable before the return, and that is also no longer there. 我在返回之前添加了一个变量，该变量也不再存在。 It has to be some kind of scope issue, but I don't understand what would be causing the problem. 它一定是某种范围的问题，但是我不知道是什么引起了问题。

'use strict';

angular.module('App')
   .directive('modalRemoteTerminal', ['equipment', 'remoteTerminalFactory',      function (equipment, remoteTerminalFactory) {
    var test = true;
     // equipment & remoteTerminalFactory exist as expected
     return {
       templateUrl: 'app/equipment-detail/health-tab/modal-remote-terminal/remote-terminal.html',
       restrict: 'E',
       link: function (scope, element, attrs) {
        // test, equipment & remoteTerminalFactory are undefined
        scope.modalCtrlRemoteTerminal = {};
        scope.remoteTerminal = function(){ 
        scope.modalCtrlRemoteTerminal.openModal();
        };
      }
    };
  }]);

Answer 1

There are several basic things that must be implemented in order to access angular factory. 为了访问角度工厂，必须执行一些基本操作。

Please see this Plunker , I've put your directive inside angular app, and created mock factories. 请参阅此Plunker ，我已将您的指令放入angular应用程序中，并创建了模拟工厂。

Here are main points: 这里是要点：

instantiate services (mock factories in our case) 实例化服务（在我们的例子中是模拟工厂）

 angular.module('App').factory('equipment', function () { return { tellSomething: function(text){ console.log(text) } }; }); ...

inject services into directive (this part looks fine in your code snippet), try to use service method in order to test 将服务注入指令（这部分在您的代码段中看起来不错），尝试使用服务方法以进行测试
```
 link: function (scope, element, attrs) { //showing the access to injected factories/services equipment.tellSomething("I'm equipment factory"); remoteTerminalFactory.tellSomething("I'm remoteTerminalFactory factory"); ... 
```
make sure all angular files are imported into index.html in right order (the main thing is to import file with app instantiation first) 确保以正确的顺序将所有角度文件导入index.html （主要是首先使用应用程序实例导入文件）
```
 <script src="script.js"></script> <script src="service.js"></script> <script src="directive.js"></script> 
```

use your custom directive in index.html 在index.html使用您的自定义指令

 <body ng-app="App"> <h2>Angular app</h2> <hr> <modal-remote-terminal></modal-remote-terminal> </body>

See Plunker for more details. 有关更多详细信息，请参见柱塞。 You'll see that test methods from factories are executed, which means that services are accessible. 您会看到工厂执行了测试方法，这意味着可以访问服务。

无法访问指令链接功能内部的注入服务

问题描述

1 个解决方案

解决方案1
1 2016-01-12 18:16:16

无法访问指令链接功能内部的注入服务

问题描述

1 个解决方案

解决方案1 1 2016-01-12 18:16:16

解决方案1
1 2016-01-12 18:16:16