如何在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>

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