AngularJS指令，通过指令属性调用服务

Question

我正在尝试创建一个 angular 指令来调用服务方法来检查不断变化的数据库。

这是我的 HTML:

<div my-directive="Panel.check"></div>

我要的是：

调用"Panel"服务的"check"方法。指令对服务及其方法一无所知。它只是解析属性并绑定它们，或者如果必须注入，请告诉我解决方案。

我有：

appDirectives.directive('myDirective', function($parse) {

var directiveOnObject = {
    restrict: 'A',
    scope: { method:'&myDirective' },
    link: function(scope,element,attrs) {

        var panel = scope.method;

        console.log(panel());
    }
};  

return directiveOnObject;

});

Scope 方法应该获取 "Panel" 的实例并调用它的 "check" 方法。

有什么解决办法吗？请解释。

Answer 1

首先，您需要在指令中注入服务：

appDirectives.directive('myDirective', ['$parse', 'myService', function($compile, myService){
 // here use 'myservice' to get access to variables and methods of the service
}]);

Answer 2

您需要能够访问控制器中的 Panel 服务，例如：

angular.module('app').controller('Foo', function($scope, Panel) {
  $scope.Panel = Panel;
});

现在您可以使用您的指令，但是当您使用 & 传递函数时，您还需要放置括号：

<div my-directive="Panel.check()"></div>

没有它就不行。其余代码保持不变。

检查一下here

编辑：如果您只需要您的指令使用一种确切的服务或一种确切的方法，请像使用 $parse 一样将服务注入指令（顺便说一句，在任何情况下都不需要） .

编辑 2：如果您要调用的服务接受参数，您需要执行以下操作：

<div my-directive="Panel.check(param1, param2)"></div>

然后在指令中，您需要将这些参数映射到您的本地对象，因此，例如（在您的指令中）您有：

link: function(scope, element, attrs) {
  var foo = 1;
  var bar = 2;
}

并且您想将这些变量作为参数传递。

首先，你需要回忆一下你是如何在 html 中命名这些参数的，具体来说它们是 param1 和 param2 所以你需要做（在 link 函数):

scope.method({param1: foo, param2: bar});

所以对于 param1 我们通过 foo 而对于 param2 我们通过 bar.

AngularJS指令，通过指令属性调用服务

AngularJS directive, Call service by directive attribute

angularjs

angular-directive