AngularJS - Isolate Scope Review

Here we already have our main.js and index.html set up:

app.controller('AppController', function($scope){
  $scope.leaveVoicemail = function(number, message){
    alert('Number: ' + number + ' said: ' + message);
  };
});

app.directive('phone', function(){
  return {
    restrict: 'E',
    scope: {
      number: '@',
      network: '=',
      makeCall: '&'
    },
    templateUrl: 'phone.html'
    link: function(scope){
        scope.networks = ["Verizon", "AT&T", "Sprint"];
        scope.network = scope.networks[0];
      }
  };
});

<div ng-app="phoneApp">
  <div ng-controller="AppController">
    <phone number="555-1234" network="network" make-call="leaveVoicemail(number, message)"></phone>
    <phone number="867-5309" network="network" make-call="leaveVoicemail(number, message)"></phone>
    <phone number="911" network="network" make-call="leaveVoicemail(number, message)"></phone>
  </div>
</div>

<div>
  Number: {{number}}
  Network:<select ng-model="network" ng-options="net for net in networks"></select>
</div>
<input type="text" ng-model="value">
<div class="btn" ng-click="makeCall({message: value, number: number})">
  Call Home!
</div>

Note: the directive template was migrated into its own view file, phone.html, for better readability here.

Let's go over each of the isolate scope options. We have "@", which is basically shorthand for reading in an attribute. Then there's "=", which is going to set up a bidirectional two-way binding so that anything we update on the directive will be updated in the controller as well. Lastly, the "&" which is for calling something within the scope of that controller. To demonstrate, we can run the application.

We have three phones that are on a family plan. The number attribute is passed to the directive via the number attribute. The "@" scope allows the numbers to be read and isolated from the other phone directives. When we use the dropdowns and choose a different network, the change is reflected about all of the directives, since the phones are on a family plan. This is because the "=" is a two-way binding. When the network is changed it is updated in the controller, which then changes the network on the other directives since the network attributes on the directives are set to the network in the controller. There's no relationship between the directives themselves. When we type a message into each of the inputs and hit "Call home!" button, we see that the message is alerted with the phone number of the corresponding directive. The "&" allows make-call to be bound to the leaveVoicemail function, while remaining isolated from the other directives.