2

I feel like I got stuck in a black hole between Angular versions, and I haven't been capable of doing something that should be simple. Docs aren't helping.

I'm using 1.5.x, and doing a small component that's supposed to serve as a "loading..." text with a light animation inside, this is the component code:

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('')
});

And this is the html in the partial that's supposed to use it:

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

I tried both options {{$ctrl.loadingtext}} and {{loadingtext}}. Could someone please explain me how this communication works. I want the component to receive two attributes, one is the text that is going to display while the loading is present, and the other is an additional class that could apply to that particular limbo instance.

Alexander Fradiani
  • 1,001
  • 3
  • 13
  • 33

1 Answers1

4

You're using the '=' in loadingtext: '=' while passing in a value so you should be using '@';

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

Community
  • 1
  • 1
Stephen Gilboy
  • 5,572
  • 2
  • 30
  • 36
  • What does this mean, though? For a complete beginner this isn't very helpful, where should this "@" symbol go in the code? – Jack M Aug 18 '18 at 13:30