Question

我正在尝试创建一个用于调用服务方法的角度指令来检查更改数据库。

这是我的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;

});

范围方法应该获取“Panel”的实例并调用它的“check”方法。

这有什么解决方案吗？请解释一下。

Answer 1

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

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

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

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

没有它，它就不会起作用。其余代码保持不变。

检查here

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

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

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

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

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

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

首先，您需要回想一下如何在html中命名这些参数，具体来说它们是param1和param2所以你需要这样做（在链接函数内）：

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

因此，对于param1，我们传递了foo，而对于param2，我们传递了bar。

Answer 2

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

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

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

2 个答案: