How to bind a variable to objects in AngularJS?

Question

In the below code and after using bind(this), I was able to use this.name in configureItemScope.

However when I call updatename() the value of itemScope.item does not get updated. it seems it's not binding to this.name?

module.controller('ListController', function () {
    this.name = "initial";
    this.delegate = {
        configureItemScope: function (index, itemScope) {
            itemScope.item = this.name;
        }.bind(this)};
    this.updatename = function(){ this.name = "changed"; }.bind(this)
});

When you click the button, the values to do not change: https://codepen.io/scatman007/pen/PywGor

<ons-page ng-controller="ListController as list">
 <ons-button ng-click="list.change()">click to change</ons-button>
  <ons-list>
    <ons-list-item ons-lazy-repeat="list.delegate">{{ item }}</ons-list-item>
  </ons-list>
</ons-page>

JS

ons.bootstrap()
  .controller('ListController', function() {
   this.delegate = {
      configureItemScope: function(index, itemScope) {itemScope.item = "OLD";},
      countItems: function() {return 0;}
    };

    this.change = function()
     {
      this.delegate.configureItemScope= function(index, itemScope) {
           itemScope.item = "NEW";
      }
      this.delegate.countItems= function() { return 1000;}
     }.bind(this);

  });

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — jonrsharpe, Sep 29 '18 at 09:49
I edited the question, I am using bind(this) but I have a problem with the binding — scatman, Sep 29 '18 at 12:43
oh yes makes sense! however it's still not working after binding updatename to this — scatman, Sep 29 '18 at 13:18
You should avoid `this` binding and make use of controller-as syntax and some viewModel variable `vm` for the controllers. Also, why would `itemScope.item` should update its value automatically, it's just bind to `this` and not listening to change event of `this.name`. — Shantanu, Sep 29 '18 at 18:25
I am actually using controller-as. can you post a sample code to update itemScope by listening to a change event for this.name? in other words how can i change this.delegate and bind the change to my html: {{ item }} — scatman, Sep 30 '18 at 17:43
When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. That code should be… Complete – Provide all parts needed to reproduce the problem including the HTML and libraies used. See [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve), — georgeawg, Oct 01 '18 at 16:23
@georgeawg this is my code: https://codepen.io/scatman007/pen/PywGor — scatman, Oct 02 '18 at 06:54

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

From the Docs:

AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc...

You can also use $apply() to enter the AngularJS execution context from JavaScript. Keep in mind that in most places (controllers, services) $apply has already been called for you by the directive which is handling the event. An explicit call to $apply is needed only when implementing custom event callbacks, or when working with third-party library callbacks.

For for more information, see AngularJS Developer Guide - Integration with the Browser Event Loop

i tried adding $scope.$apply() but still did't work. btw here is my code: https://codepen.io/scatman007/pen/PywGor — scatman, Oct 02 '18 at 06:59

How to bind a variable to objects in AngularJS?

1 Answers1