Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html ng-app="myApp">
  <head>
<meta name="description" content="This is a template for angular experiments" />
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
  </head>
  <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
  <body>
    <ul>
      <li>
        <a href="#factories">Understanding Factories</a>
      </li>
      <li>
        <a href="#sharing-data-on-controllers">Sharing data between controllerss</a>
      </li>
      <li>
        <a href="#topic1">Javascript: Objects passed as reference</a>
      </li>
      <li>
        <a href="#topic2">When does the reference stop working?</a>
      </li>
      <li>
        <a href="#example">Example</a>
      </li>
    </ul>
    
    <h1 id="factories">Understanding Factories</h1>
    <h2 id="sharing-data-on-controllers">Sharing data between controllers</h2>
    <span><b>by marcio reis</b></span>
    <h5 id="topic1">Javascript: Objects passed as reference</h5>
    <p>
      Any singleton is passed as reference when it comes to javascript.
    </p>
    <pre>
      var b = { name: 'Ricardo' }
      var a = b;
      //updating the property name of b.name to something else will cause the a.b to be updated. This is what happens when when we use factories. 
      
    </pre>
    <h5 id="topic2">When does the reference stop working?</h5>
    <p>Whenever we try to bind an object to other object properties the reference is lost and changing values wont be reflected anymore without our intervention</p>
    <pre>
      var b = { name: 'Ricardo' }
      var a = b;
      var c = b.name; //c is now 'Ricardo';
      c = 'Maria';
      // b.name is still Ricardo
      // a.name is still Ricardo
    </pre>
    
    
    
    <!-- 
THE DEMO
-->
    
    
<div id="example" style="background:#f3f3f3">    
  <h1>Example</h1>
  <h4>Keep data sync using the object reference <a href="#topic1">from here</a></h4>
    <div ng-controller="foo">
      This controller updates the property when we click the link 'update' <br/>
      {{binValue.getByte();}}
      <input type="text" ng-model="value">
            <a href="javascript:void(0);" ng-click="setBin()">update</a>
      <span style="color:red;">The input value doesn't update when you write on the inputbox of the second example because it's a different property! </span>
    </div>
    <br/><br/>
    <div ng-controller="bar">
            This controller has a two-way binding input between the input value and binFactory property 'byte' which causes other scopes that are bound to the same object reference to update automatically <br/>
              {{binValue.getByte();}}
          <input type="text" ng-model="binValue.byte">
​
    </div>
  <br/><br/>
  <h4>Failing Examples</h4>
   <div ng-controller="fooFail">
      
      {{binValue.getByte();}}
      <input type="text" ng-model="value">
            <a href="javascript:void(0);" ng-click="setBin(value)">update</a>
     <span style="color:red;">DON'T!!! This example binds the scope to different properties and methods of our factory. This breaks the object reference!</span>
    </div>
    <br/><br/>
    <div ng-controller="barFail">
            
              {{binValue.getByte();}}
          <input type="text" ng-model="value">
      <a href="javascript:void(0);" ng-click="setBin()">update</a>
      <span style="color:red;">DON'T: This example doesn't update when we change the value on the first 2 examples because it's bound to a property of the factory. ($scope.value = 'binFactory.byte'). But when we click the update button the first to examples are updated because we call the method setByte on it's own object reference</span>
    </div>
  
    </div>
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mreis1pro
0viewers