AngularJS 组件 - 如何传入后端变量？

Question

我正在尝试对我的代码库进行组件化处理，但遇到了这个问题。

当使用 $scopes 和控制器时，我会使用 ng-init 将服务器令牌传递给我的 rest 调用方法。尝试对组件做同样的事情是行不通的。

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>

如何将值传递给组件？

Answer 1

问题是 ng-init 在控制器实例化后执行。但是，您在构建控制器期间创建了 restData 对象，此时 serverToken 未定义。

您可以在调用 ng-init 之后构建您的 restData 对象，如下所示：

.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>

AngularJS 组件 - 如何传入后端变量？

AngularJS Components - How do I pass in a back end variable?

javascript

angularjs

angularjs-components