javascript - Angular div not changing text when updating $scope -


i'm have button change underlying $scope , can show changes text in mapped/bound div doesn't change

to specify desired result when click button text button should change text of <div id="text"> how ever doesn't i'm not sure i'm doing incorrectly

var myapp = angular.module('myapp', []);  myapp.controller('myctrl', function($scope){  	$scope.data =    	{"person":       	{"id": 3,        "text": "this 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 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>

since using settimeout function need manually start $digest cycle. use $scope.$apply() after text change. start cycle , bind values view

var myapp = angular.module('myapp', []);  myapp.controller('myctrl', function($scope){  	$scope.data =    	{"person":       	{"id": 3,        "text": "this 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 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>


Comments

Popular posts from this blog

inversion of control - Autofac named registration constructor injection -

verilog - Systemverilog dynamic casting issues -

ios - Change Storyboard View using Seague -