如何在AngularJS ng-click(或ng-change，..）中调用服务函数

How to call a service function in AngularJS ng-click (or ng-change, ...)?

本文关键字：调用 函数 服务 ng-change AngularJS ng-click      更新时间：2023-09-26

调用这样的函数时：

HTML:

<select ng-model="var" ng-change="myFunction(var)">
  <option ng-repeat="option in alloptions">{{option}}</option>
</select>

JS:

$scope.myFunction = function(){//do things}

这一切都很完美，但当我的函数在一个服务（控制器可以访问）中时，函数就不会被调用。通过将服务名称作为前缀来调用它也不是一个选项（即使这在javascript代码本身中有效）myService.myFunction(var)

所以我的问题是：当服务位于服务中时，在ng-change中调用服务的正确方法是什么？

提前感谢

您需要通过作用域使用函数来调用服务函数。因此，在您的示例中，您可以在作用域的myfunction方法中调用服务方法，前提是您的服务被注入到您的控制器中。

$scope.myFunction = function(var){
   myService.myFunction(var);    
}

请始终记住，只有在$scope中定义的属性在UI中可用，而不是您的服务。

虽然Whizkids的答案在技术上是正确的，但我认为通过将整个服务直接附加到作用域来将其暴露在视图中没有问题。然而，这取决于项目的复杂性和服务的设计。

例如，我编写的大多数与可重用视图状态相关的服务都只是一组函数，其中一个函数公开了底层数据。

return {
    getData: function() { return container; },
    doSomethingOnData: function() { /* some manipulation of container */ }
};

现在，只需将服务数据附加到$scope变量即可访问服务数据：

$scope.serviceData = MyService.getData();

因此，访问服务函数的选项是使用Whizkids answer并创建附加到scope的包装函数，或者直接向视图公开服务。

$scope.$MyService = MyService;

对此，你可以做一些类似的事情：

<div ng-click="$MyService.doSomethingOnData()"></div>

虽然这种做法严格违反了angulars分离原则，但如果您的服务中有很多函数需要用简单的包装器公开，它确实会使代码简洁。

相关文章：