Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Mark has some great suggestions! Make sure you also check out the <a href="https://chrome.google.com/webstore/detail/ighdmehidhipcmcojjgiloacoafjmpfk" rel="nofollow noreferrer">AngularJS Batarang Chrome Extension</a> to see the various scopes and their values (among other things). Note it doesn't appear to work well with jsFiddle.</p> <p>I'm not sure how to access inner scopes directly but here is one way to access the same text in the outer scope by binding to an object instead of a primitive.</p> <p>1) Declare <code>todoText</code> as an object instead of a primitive in your controller:</p> <pre><code>$scope.todoText = {text: ''}; </code></pre> <p>2) Bind to <code>todoText.text</code> instead of just <code>todoText</code>:</p> <pre><code>&lt;form ng-submit="addTodo()"&gt; &lt;input type="text" ng-model="todoText.text" size="30" placeholder="add new todo here"&gt; &lt;input class="btn-primary" type="submit" value="add"&gt; &lt;/form&gt; </code></pre> <p>3) Modify the existing functions to use <code>todoText.text</code>:</p> <pre><code>$scope.addTodo = function() { $scope.todos.push({text:$scope.todoText.text, done:false, width: Math.floor(Math.random() * 100) + 50}); $scope.todoText.text = ''; }; </code></pre> <p>Take a look at <a href="http://jsfiddle.net/uvBwH/" rel="nofollow noreferrer">this fiddle</a> and note that the text displayed beneath the textbox when you type something in is accessing the <code>todoText.text</code> on the outside scope. </p> <p>If you change the code back to use a primitive (like in <a href="http://jsfiddle.net/uvBwH/1/" rel="nofollow noreferrer">this fiddle</a>) the parent scope <code>todoText</code> won't reflect any changes you make to the textbox. This is likely more to do with how JavaScript copies reference values (see <a href="https://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language">this post</a> for more info) and less an AngularJS specific thing.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload