Как изменять данные внутри Angular 1.5 Component через внешний Service?

Question

[markmariner]

Я пишу приложение с использованием компонентов Angular 1.5. Данные в компонент передаются извне через параметр resolve, таким образом, я могу отображать данные из разных источников в одном и том же компоненте. Но я не понимаю, как я должен поступить, чтобы изменить эти данные внутри компонента.

Предположим, у меня есть сервис User, который работает с пользователями через API. При загрузке стейта (и, соответственно компонента), я обращаюсь к методу Users.get(), получаю данные пользователей и передаю их внутрь компонента. Для роутинга я использую UI Router. Например:

//...
$stateProvider
      .state('users', {
        url: '/users',
        component: 'formPage',
        resolve: {
          values: function(Users) {
            return Users.get();
          });
//...

// Внутри компонента formPage
//...
component('formPage', {
  bindings: {
    values: '<'
  },
//...

Я получаю эти данные, всё хорошо. Но в шаблоне компонента находится форма, в которой можно изменить данные. При сохранении этих данных я хочу вызвать метод Users.update(), с помощью которого они передадутся на сервер. Но компонент ничего не знает о сервисе Users! И не должен знать, чтобы быть независимым от набора данных.

Каким образом мне указать, что в этом стейте для изменения данных нужно использовать конкретный метод Users.update()? И как мне вызвать этот метод, изменяющий данные, внутри компонента?

Answer 1

[markmariner]

На stackoverflow.com мне ответили:

resolve: {
  values: function(Users) {
    return Users.get();
  },
  onUpdate: function(){
    return Users.update.bind(Users);
  }
);

bindings: {
    values: '<',
    onUpdate: '<'
},

И вы можете вызвать функцию так: $ctrl.onUpdate(data).then(...

Это вправду работает, как нужно.

Answer 2

[Николай]

Немного странно, что компонент не должен знать о сервисе для отправки данных.
Вы можете пихнуть action через биндинги компонента {action: '&'}, если планируется, что эта форма будет использоваться с разными сервисами отправки данных.
Но это конечно очень странно : )

Comments

[markmariner]

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

Если я сделаю биндинг {action: '&'}, то что мне нужно будет написать в событии кнопки? $ctrl.actions(data)?

Что должно быть указано в разделе resolve стейта у параметра actions?

[Николай]

видимо в resolve нужно будет написать action: function(Users) { return Users.update; }; т.е. ссылку на функцию. Я никогда не кидал через resolve функции. Возможно вам стоит сделать какой-то промежуточный объект, который будет получать на вход нужную фабрику и данные и его уже засовывать в resolve.

Answer 3

[lega]

Если компонент не завязан ни на какой сервис данных, то коммуникацию можно сделать через проперти из родительского компонента (приложения/контроллера).

Comments

[markmariner]

А что делать если родительского компонента нет? Если этот компонент — тот, что загружается напрямую в стейт, как в примере выше?

[markmariner]

Обратился к документации. Там предлагают:

1. Внутри компонента добавить биндинг onUpdate: '&'.
2. В html-коде, где этот компонент подключается написать:

<my-comp on-update="$ctrl.update(value)"></my-comp>

3. При изменении внутри контроллера выполнять this.onUpdate({value: currentValue});, то есть передавать данные наверх, как объект

Здесь всё понятно, но проблема в том, что я подключаю компонент не строкой

<my-comp on-update="$ctrl.update(value)"></my-comp>

, а указывая его имя в стейте, это самый высокий уровень.

Я попытался указать его в разделе resolve разными способами:

$stateProvider
      .state('users', {
        url: '/users',
        component: 'formPage',
        resolve: {
          onUpdate: function() {
            alert('Получилось!');
          });

или

$stateProvider
      .state('users', {
        url: '/users',
        component: 'formPage',
        resolve: {
          onUpdate: function update() {
            alert('Получилось!');
          });

И в том, и в другом случае я получил ошибку внутри UI Router. Насколько я понял, ошибка вызвана тем, что функция неименована.

Я попробовал написать так:

$stateProvider
      .state('users', {
        url: '/users',
        component: 'formPage',
        resolve: {
          onUpdate: Users.update()

и получил ошибку, что Users не определена. Это правда, но в module.config я не имею права подгружать сторонние зависимости, кроме $stateProvider и $urlRouterProvider.

Тогда я попробовал написать:

$stateProvider
      .state('users', {
        url: '/users',
        component: 'formPage',
        resolve: {
          onUpdate: Users.update()

...

angular.
module('generalApp').
controller('GeneralController', function(){
  var example = function () {
    alert('Получилось!');
  }
})

Но, как и раньше получил ошибку, что этой функции не существует.

Возможно, первый вариант и верный, просто не поддерживается UI Router на текущий момент.

[Николай]

Если и заработает через resolve - то так:

resolve: {
    onChange: ['Users', function(Users) {
          return Users.change;
    }
}

[lega]

markmariner: > это самый высокий уровень.
значит этот компонент - приложение/контроллер, а приложение может иметь линки на сервисы

[markmariner]

В общем, я посмотрел на гитхабе в issues, оказалось, что да, UI Router через resolve '&' не умеет привязывать, только '=' и '<'. Я создал новый issue, а пока попробую через стандартный Component Router.

Answer 4

[_ _]

В ангуляре нормально, если компонент знает о сервисе - он же не знает о его конкретной реализации, а получает его через DI. Поэтому tight coupling тут нет, можно тестировать независимо.
Так что не придумывайте себе проблем на ровном месте.

Comments

[markmariner]

Не могли бы вы привести пример, пожалуйста.

[markmariner]

Дело в том, что эти сервис может меняться для разных стейтов, хотя компонент остаётся одним и тем же.