Menu
I am able to access the $scope variable per the accepted answer here. However, I am not able to edit it from the console, i.e. change properties, call functions etc. Is this even possible?
Here is a test code I've been experimenting with:
<!doctype html>
<html data-ng-app="Foo">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("Foo", []);
app.controller("One", ["$scope", function($scope) {
$scope.text = "hello";
}]);
</script>
</head>
<body>
<div id="container" ng-controller="One">
{{ text }}
</div><!-- #container -->
</body>
</html>
If I edit the text property using the console, it changes, but the view does not change:
> angular.element($("#container")).scope().text
< "hello"
> angular.element($("#container")).scope().text = 'bye'
< "bye"
How do I change the $scope values and properties from the console, so that the view and all dependencies also get updates?
811
Any scope variable updated from outside angular context will won't update it binding, You need to run digest cycle after updating values of scope using scope.$apply() that will call $digest method and all the bindings will update on HTML.
angular.element($("#container")).scope().text
angular.element($("#container")).scope().$apply()
Note:- You should add jQuery file in order to make it working.
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
