Question

我觉得我被困在Angular版本之间的黑洞中，而且我没有能力做一些应该简单的事情。文档没有帮助。

我正在使用1.5.x，做一个小组件，它应该作为一个带有光动画的“loading ...”文本，这是组件代码：

ctrls.component('limbo', {
  bindings: {
    loadingtext: '='
  },

  controller: function () {
    this.test = 0;
    this.p = '...';

    this.$onInit = function () {
      this.tmo = setInterval(function () {
        this.p += '.';
        document.getElementById('loader_txt').innerHTML = this.p;

        if (this.p.length  === 18)
          this.p = '...';
      }.bind(this), 100);
    };
  },

  template: [
    '<div class="alert alert-info">',
      '<span>{{$ctrl.loadingtext}}</span>',
      '<span>{{loadingtext}}</span>',
      '<span id="loader_txt"></span>',
    '</div>'
  ].join('')
});

这是部分中应该使用它的html：

<limbo loadingtext="loading projects"></limbo>

我尝试了两个选项{{$ ctrl.loadingtext}}和{{loadingtext}}。有人可以解释一下这种沟通是如何运作的。我希望组件接收两个属性，一个是在加载存在时要显示的文本，另一个是可以应用于该特定limbo实例的附加类。

Answer 1

你在传递一个值时使用loadingtext: '='中的'='，所以你应该使用'@';

What is the difference between & vs @ and = in angularJS

Angular 1.5：将属性传递给组件

1 个答案: