Databases
StackOverflow2013
Postsdbo
POAngularJS - scope differences
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS - scope differences
    text
    copied!<p>I created a simple fiddle, to illustrate the differences between <code>scopes (true, false, {})</code>.</p> <p>But I can't understand, why it's not working as I expect...</p> <p>1) Why changing the "<code>val</code>" on controller, affects <code>directiveTwo</code> with "<code>scope:true</code>". If I change the value in directive, then controller stops to affect it.</p> <p>2) Why <code>directiveThree</code> has Isolated scope, but it inherits the values from controller (so value created in <code>directiveOne</code>, passed to it to), changing the value in controller affects the <code>directiveThree</code>. When I change the value from that directive, it affects the controllers value. Shouldn't Isolated scope be Isolated?</p> <p><a href="http://jsfiddle.net/EVxAh/1/" rel="nofollow">Fiddle</a><br> HTML:</p> <pre><code>&lt;div id="myApp" ng-controller="ctrl1"&gt; Controller: &lt;input ng-model="val"/&gt; &lt;b&gt;{{val}}&lt;/b&gt; Child: &lt;b&gt;{{childVal}}&lt;/b&gt; &lt;br/&gt; &lt;div directive-one&gt; Directive 1: &lt;input ng-model="val"/&gt; Val: &lt;b&gt;{{val}}&lt;/b&gt; Child: &lt;b&gt;{{childVal}}&lt;/b&gt; &lt;/div&gt; &lt;div directive-two&gt; Directive 2: &lt;input ng-model="val"/&gt; Val: &lt;b&gt;{{val}}&lt;/b&gt; Child: &lt;b&gt;{{childVal}}&lt;/b&gt; &lt;/div&gt; &lt;div directive-three&gt; Directive 3: &lt;input ng-model="val"/&gt; Val: &lt;b&gt;{{val}}&lt;/b&gt; Child: &lt;b&gt;{{childVal}}&lt;/b&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>JavaScript:</p> <pre><code>angular.module("myApp", []) .controller("ctrl1", function($scope){ $scope.val = "CTRL"; }) .directive("directiveOne", function(){ return { controller: function($scope){ $scope.childVal = 1; }, scope:false //or not defined at all }; }) .directive("directiveTwo", function(){ return { controller: function($scope){ $scope.childVal = 2; }, scope:true }; }) .directive("directiveThree", function(){ return { controller: function($scope){ $scope.childVal = 3; }, scope:{} }; }); angular.bootstrap(document.getElementById('myApp'), ["myApp"]); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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