Angular div not changing text when updating $scope

Question

I'm have a button that will change the underlying $scope and it can show it changes but the text in the mapped/bound div doesn't change

to specify my desired result is when I click the button with the text button it should change the text of <div id="text"> how ever it doesn't so I'm not sure what I'm doing incorrectly

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){
	$scope.data =
  	{"person": 
    	{"id": 3,
      "text": "this is the text value"
      }
		};
    
});

setTimeout(function(){
var elem = document.getElementById('ex');
elem.addEventListener('click',
function(){
	$scope = angular.element(document.getElementById('text')).scope();
  $scope.data.person.text = "this is new text";
},false);

elem = document.getElementById('log');
elem.addEventListener('click', function(){
console.log(angular.element(document.getElementById('text')).scope().data.person.text);
},false)

//alert('load');
},500);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div id="id" ng-model="data.person.id">{{data.person.id}}</div>
  <div id="text" ng-model="data.person.text">{{data.person.text}}</div>
</div>

<button id="ex">
button
</button>

<button id="log">
log
</button>

you can not bind model to div

Hadi
– Hadi

2017-04-06 13:17:25 +00:00
Commented Apr 6, 2017 at 13:17 — Hadi
– Hadi, Commented Apr 6, 2017 at 13:17

JeanJacques · Accepted Answer · 2017-04-06 15:02:45Z

3

There are Angular directives to do this, use ngClick like that :

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){
    $scope.data = {"person": {"id": 3, "text": "this is the text value"}};
    
    $scope.changeTextValue = function(){
      $scope.data.person.text = "this is new text";
    }
    
    $scope.log = function(){
      console.log($scope.data.person.text);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div>{{data.person.id}}</div>
  <div>{{data.person.text}}</div>
  <button ng-click="changeTextValue()">
    button
  </button>

  <button ng-click="log()">
    log
  </button>
</div>

Also ngModel is only used for an input, a select or a textarea. Using {{data.person.id}} is sufficient to get data.person.id value (check this page for more informations on interpolation and data binding)

edited Apr 6, 2017 at 15:02

answered Apr 6, 2017 at 13:33

JeanJacques

1,7501 gold badge13 silver badges26 bronze badges

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

2 Comments

devnull69 Over a year ago

You should omit the ng-model from the div elements and explain why they are not correct

Jpsh Over a year ago

Thank you for explaining ng-model

Sachila Ranawaka · Accepted Answer · 2017-04-06 13:15:37Z

since you are using setTimeout function you need to manually start the $digest cycle. use $scope.$apply() after the text change. It will start the cycle and bind the values to view

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){
	$scope.data =
  	{"person": 
    	{"id": 3,
      "text": "this is the text value"
      }
		};
    
});

setTimeout(function(){
var elem = document.getElementById('ex');
elem.addEventListener('click',
function(){
	$scope = angular.element(document.getElementById('text')).scope();
  $scope.data.person.text = "this is new text";
  $scope.$apply()
},false);

elem = document.getElementById('log');
elem.addEventListener('click', function(){
console.log(angular.element(document.getElementById('text')).scope().data.person.text);
},false)

//alert('load');
},500);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div id="id" ng-model="data.person.id">{{data.person.id}}</div>
  <div id="text" ng-model="data.person.text">{{data.person.text}}</div>
</div>

<button id="ex">
button
</button>

<button id="log">
log
</button>

Madhura KM · Accepted Answer · 2017-04-06 14:07:25Z

1

AngularJs one of main advantage is 2 way binding and help user to avoid DOM access and manipulation through code (Avoid using document.getElementById()).

You have written event handler code outside the controller, which is not in AngularJs scope. All your view's behaviour can go inside the controller and then you can access the scope data with $scope directly. attach the event handler to the event attribute ng-click (for click event) in your button. Bind the required data to div with one way binding like {{data}}. ng-model is not required here as you are not editing it through UI.

answered Apr 6, 2017 at 14:07

Madhura KM

1401 silver badge10 bronze badges

Collectives™ on Stack Overflow

Angular div not changing text when updating $scope

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related