A quick experiment with AngularJS 2-way data binding.

A-quick-experiment-with-AngularJS-2-way-data-binding..markdown

A quick experiment with AngularJS 2-way data binding.

There was an assumption that since native javaScript uses pass by reference on objects, that Angular would as well. This is not true. Angular actually uses something called watchers. This codepen was an experiment to see how to work with bound data shared by multiple controllers.

A Pen by Adam Plante on CodePen.

License.

index.html

<div ng-app="testApp">
  <h2>Experimenting with AngularJS data binding</h2>
  <p>There are somethings you just can't learn about when it comes to AngularJS and 2-way data binding without taking it to the playground.</p>
  <div class="leftBlock" ng-controller="Ctrl1 as c1">
    <h4>Box 1</h4>
    <p>I am bound to the same data as box 2. Data binding is done using a custom service called "PeopleData". This gets us around the variable scope issues that surrond controllers using the same data set.</p>
    <ul>
      <li ng-repeat="dude in c1.datums">
        {{dude.name}}
      </li>
    </ul>
  </div>
  
  <div class="leftBlock" ng-controller="Ctrl2 as c2">
    <h4>Box 2</h4>
    <p>My data is also bound to the PeopleData service. If you change data in one of these text fields, it will modify PeopleData directly which will effect both Box 1 and Box 2 immediately.</p>
    
    <div class="innerBlock" ng-repeat="dude in c2.datums">
      {{dude.name}}<br/>
      <input type="text" ng-model="dude.name" />
    </div>
  </div>
  
  <div class="leftBlock" ng-controller="Ctrl3 as c3">
    <h4>Box 3</h4>
    <p>My data makes a deep copy of the data in the PeopleData service. This way I can manipulate the data without having an immediate effect on the other boxes. I can then trigger the data to update at my own terms; like by using a handy button.</p>
    
    <div class="innerBlock" ng-repeat="dude in c3.datums">
      {{dude.name}}<br/>
      <input type="text" ng-model="dude.name" />
    </div>
    <button ng-click="c3.setData()">Apply to data</button>
  </div>
  
  
</div>

script.js

var app = angular.module('testApp', []);

app.factory('PeopleData', function(){
  return [{name: 'Homestar Runner'}, {name: 'The Cheat'}, {name: 'Strongbad'}, {name: 'TROGDOR!!!!'}];
});

app.controller('Ctrl1', function($scope, PeopleData){
  this.datums = PeopleData;
});

app.controller('Ctrl2', function($scope, PeopleData){
  this.datums = PeopleData;
  console.log();
});

app.controller('Ctrl3', function($scope, PeopleData){
  this.datums = angular.copy(PeopleData);
  //console.log(PeopleData);
  this.setData = function() {
    for (var i=0; i<this.datums.length; i++) {
      PeopleData[i] = this.datums[i];
    }
    // we need to then recopy to break the binding.
    this.datums = angular.copy(PeopleData);
  };
});
  

style.css

.leftBlock {
  float: left;
  border: 1px dotted #ccc;
  margin: 5px 10px;
  padding: 5px;
  width: 20%;
}

.innerBlock {
  margin-bottom: 20px;
}