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
Post a Comment