Login/Register
AngularJS : How to edit $scope from the console? [duplicate]
Asked Answered
Solved javascriptangularjsangularjs-digest
T

1

13

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?

Tool answered 9/6, 2015 at 15:39 Comment(8)
This is NOT a duplicate question (just has a poor title) – Involucel
#15663912 – Velmaveloce
@DavidGrinberg Linked question answers what OP is asking for. Actually i found more of them too. – Velmaveloce
@Velmaveloce That is not the question you claim it is a duplicate of, and even this other question you linked doesn't really answer this well. The core question here is how to 'apply' the change. – Involucel
@DavidGrinberg Read down the answer . #13743558 – Velmaveloce
@Velmaveloce Yes, the lowest ranking, not-accepted answer. As I said, doesn't really answer this question well. – Involucel
@DavidGrinberg i dont think 83 votes is lowest ranking.. :/ and it clearly distinguish when using vanilla and when using jquery. – Velmaveloce
@DavidGrinberg Also one more thing, had the question been how to 'apply' the change then there will be lot more duplicates because those kinds of question popsup every day. Also it does not mean you should just read the accepted answer other answers (and of course the voting systems) is there for a purpose, otherwise why would have multiple answers on the same question, might as well delete other answers once OP accepts one? Or i completely misunderstand the purpose of marking Duplicate Question. – Velmaveloce
L
16

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.

Lw answered 9/6, 2015 at 15:41 Comment(4)
This is wrong actually. OP is not even using jquery (based on the displayed code) – Velmaveloce
@downvoter please leave comment..what is wrong with mine answer? – Lw
.$apply will work but i dont know how the snippet will run if there is no jquery loaded. But weird enough OP probably is not showing full code and seems like op himself is doing it.. So i think i can give benefit of the doubt!! Mine removed... – Velmaveloce
thanks @Velmaveloce i added the same thing as note. – Lw

© 2022 - 2024 — McMap. All rights reserved.