如何在AngularJS ng-click（或ng-change，...）中调用服务功能？

Question

调用这样的函数时：

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中调用服务的正确方法是什么？

提前致谢

Answer 1

您需要使用范围内的功能来调用服务功能。因此，在您的示例中，只要将服务注入控制器，就可以在作用域的myfunction方法中调用服务方法。

$scope.myFunction = function(var){

   myService.myFunction(var);    
}

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

Answer 2

虽然Whizkids的答案在技术上是正确的，但我没有看到通过将整个服务直接附加到范围而将整个服务暴露给视图的问题。但是，这取决于项目的复杂程度以及服务的设计。

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

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

现在您可以通过将服务数据简单地附加到$scope变量来访问服务数据：

$scope.serviceData = MyService.getData();

因此，访问服务函数的选项要么与Whizkids一起回答，要么创建附加到范围的包装函数，要么直接将服务公开给视图。

$scope.$MyService = MyService;

你可以做些什么：

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

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