Javascript objects not updating in the view using Angular js

Question

I've been mucking around with angularjs for the last few days, and have hit a brick wall now that I've started mucking about with javascript objects.

I'm trying to represent an attribute of an object in the view, and then after page load change that object and have the view change. I.e

Html

<div ng-controller = "MainCtrl">
    {{object.attribute}} //Expect A, and then B. Just get A
</div>

Javascript

app.controller('MainCtrl', ['$scope', function($scope) {    
  $scope.message_object = new object("A");

  $scope.replace_message = function(){ //Happens sometime after page load
    alert("Replacing...");
    $scope.object = new object("B");
  }

}]);

function object(attribute){
    this.attribute = attribute;
}

Don't know if I'm missing something, or just have a fundamental misunderstanding of the structure of the framework. Either way some help would be appreciated :) My current code is at:

http://plnkr.co/edit/3fF0zSyZaIvVsYk8dvWf?p=preview

it's designed to update the object when a key is pressed

Chandermani · Accepted Answer · 2014-08-30 06:11:05Z

1

You are changing the scope variable outside the angularjs context. Since you are making changes on a jquery event you need to call scope.$apply when changing the scope variable in your directive. See my updated plunker

http://plnkr.co/edit/h7NLFRdp4M7TcNIn1HeY?p=preview

This is the relevant code:

jQuery(document).on('keydown', function(e){

        scope.$apply(function(){
          scope.new_object();  
        });

     });

answered Aug 30, 2014 at 6:11

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript objects not updating in the view using Angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related