Компоненты AngularJS - как передать внутреннюю переменную?

Question

Компоненты AngularJS - как передать внутреннюю переменную?

Я пытаюсь создать компонентную базу кода и застрял в этой проблеме.

При использовании $scopes и Controllers я передаю токен сервера моему методу вызова rest с помощью ng-init. Попытка сделать то же самое с Компонентом не работает.

Javascript

angular
.module('myApp', [])

.controller('mainCtrl', function() {
  var self = this;

  self.options = function() {
    var o = {}
    o.token = self.serverToken
    return o;
  }

  self.restData = {
    url: 'http://rest.url',
    options: self.options()
  }
})

.component('myComponent', {
  bindings: {
    restData: '<'
  },
  template: '<p>template, calls child components</p>',
  controller: function(restService) {

    this.callRestService = function() {
      restService.get(this.restData.url, this.restData.options) 
    }

    console.log(this.restData.url) // http://rest.url
    console.log(this.restData.options) // {token: undefined}
  }
})

HTML

<html ng-app="myApp">
  <!-- head -->

  <body ng-controller="mainCtrl as m" ng-init="m.serverToken='12345'">
    <my-component rest-data="m.restData"></my-component>
  </body>

</html>

Как передать значение компоненту?

2

javascript angularjs angularjs-components

Источник

user1564277 13 дек '16 в 15:32

1 ответ

Решение

Другие вопросы по тегам javascript angularjs angularjs-components

user4011728 13 дек '16 в 17:14 2016-12-13 17:14 · Accepted Answer · 2016-12-13 17:14

Проблема в том, что ng-init выполняется после создания экземпляра контроллера. Однако вы создаете свой объект restData во время создания вашего контроллера, когда serverToken не определен.

Вы можете создать свой объект restData после вызова ng-init примерно так:

.controller('mainCtrl', function() {
  var self = this;
  self.restData = {};

  self.init = function(token) {
    self.serverToken=token;
    self.restData = {
      url: 'http://rest.url',
      options: {token:token}
    };
  };
})

Ваш компонент может сделать что-то, когда эти restData изменятся. Например:

.component('myComponent', {
  bindings: {
    restData: '<'
  },
  template: '<p>template, calls child components</p>',
  controller: function(restService) {

    this.callRestService = function() {
       restService.get(this.restData.url, this.restData.options) 
    }

    this.$onChanges = function(changes) {

      console.log(this.restData) // http://rest.url
      console.log(this.restData.options) // {token: 12345}

      this.callRestService();
    }
  }
});

HTML-код изменится для вызова вашего метода init:

<body ng-controller="mainCtrl as m" ng-init="m.init(12345)">
    <my-component rest-data="m.restData"></my-component>
   </body>