Using Controller As Syntax

[zeeshanjan82]

I am using controller as Syntax and am facing issues while trying to access 'this' variable for the controller inside remote-api-handler function.

[ghiden]

I'm not really catching up with all the latest goodies from Angular lately.
Are you able to create a jsbin or plnkr example?

[dmash]

Use 'vm.countries' for instance as the 'local-data' attribute. Then as the 'selected object' you can use vm.selectedCountry (name it whatever you like) which you can then access from your controller

[thiphariel]

Facing the same issue while using ES6 classes. "this" refers to the current scope inside the update function while it should refers to our class.
Any way to avoid this without creepy code?

<angucomplete-alt placeholder="Départ..." pause="250" local-data="vm.places" search-fields="name" title-field="name"  text-searching="Récupération en cours..." no-result="Aucun résultat trouvé"
          input-changed="vm.updateInput"></angucomplete-alt>

class Foo {
   constructor(api) {
       this.api = api;

       this.places = [];
   }

   updateInput(string) {
      console.log(this); // Refers to the controller scope, not the class itself
   }
}

[CovertIII]

I tried using a closure, but angular gave an infinite digest error.

I changed the code above to this:

    <angucomplete-alt placeholder="Départ..." pause="250" local-data="vm.places" search-fields="name" title-field="name"  text-searching="Récupération en cours..." no-result="Aucun résultat trouvé"
          input-changed="vm.updateInput().update"></angucomplete-alt>

    class Foo {
       constructor(api) {
           this.api = api;

           this.places = [];
       }

       updateInput(string) {
          var self = this;
          return {
              update: function(string){
                  console.log(self); // Refers to class now, but angular gave an infinite digest error
              }
          }

       }
    }

Here's a plunker:

https://plnkr.co/edit/QvXYSejcZE3u4XxqITio

[wendellmva]

Any progress on this or workaround suggestions. This is only when you inline the controller in html ng-controller="SomeController as vm" the digest errors occur. The same controller from a route with controllerAs works but SomeController as vm gives the same digest errors as inline. Any help?

[ghiden]

@wendellm Can you create a plnkr example?

[CovertIII]

So finally, I think I got figured this out. Using @thiphariel's example

    <angucomplete-alt placeholder="Départ..." pause="250" local-data="vm.places" search-fields="name" title-field="name"  text-searching="Récupération en cours..." no-result="Aucun résultat trouvé"
          input-changed="vm.updateInput().update"></angucomplete-alt>

    class Foo {
       constructor(api) {
           this.api = api;

           this.places = [];
           var self = this;
           this.updateInput = function(string) {
             console.log(self); // Refers to the class now
           }
        }

}

Updated plunkr: https://plnkr.co/edit/wjWPkoKtILEeRVHjtBJY?p=preview