Directives All in one

by vishwackh89

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.4.7/css/foundation.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <div ng-app="phoneApp">
    <!-- we've replaced the use of $scope with the preferred "controller as" syntax. see:http://toddmotto.com/digging-into-angulars-controller-as-syntax/ -->
    <div ng-controller="AppCtrl as appctrl">
        <phone number="555-1234" networks="appctrl.networks" make-call="appctrl.leaveVoicemail(number, message)"></phone>
        <phone number="867-5309" networks="appctrl.networks" make-call="appctrl.leaveVoicemail(number, message)"></phone>
        <phone number="911" networks="appctrl.networks" make-call="appctrl.leaveVoicemail(number, message)"></phone>
    </div>
  </div>

JavaScript

var app = angular.module("phoneApp", []);

app.controller("AppCtrl", function() {
    var appctrl = this;
    appctrl.leaveVoicemail = function(number, message) {
        alert("Number: " + number + " said: " + message);
    };
  
    appctrl.networks = ["Verizon", "AT&T", "Sprint"];
});

app.directive("phone", function() {
    return {
        restrict: "E",
        scope: {
            number: "@",
            networks: "=",
            makeCall: "&"
        },
        template: '<div class="panel">Number: {{number}} Network:<select ng-model="selectedNetwork" ng-options="net for net in networks">' +
          '<input type="text" ng-model="value">' +
          '<div class="button" ng-click="makeCall({number: number, message: value})">Call home!</div></div>',
        link:function($scope){
          $scope.selectedNetwork = $scope.networks[0];
        }
    };
});