Как вызвать служебную функцию в AngularJS ng-click (или ng-change,...)?

При вызове такой функции:

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, когда они находятся в службе?

заблаговременно

Ответ 1

Вам необходимо вызвать сервисные функции, используя функции через область. Таким образом, в вашем примере вы можете вызвать метод службы внутри метода myfunction области, если ваша служба была введена в ваш контроллер.

$scope.myFunction = function(var){

   myService.myFunction(var);    
}

Всегда помните, что в пользовательском интерфейсе доступны только свойства, определенные в $scope, а не ваши службы.

Ответ 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>

В то время как эта практика строго противоречит принципам разделения углов, она делает код кратким, если у вас есть много функций внутри вашего сервиса, которые вам нужно выставлять с помощью простых оберток.