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>
<head lang="en">
  <meta charset="utf-8">
  <title>Egghead Videos</title>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.4.7/css/foundation.css">
</head>
<body>
​
  <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">
        <div phone dial="appctrl.callHome(message)"></div>
        <div phone dial="appctrl.callHome(message)"></div>
        <div phone dial="appctrl.callHome(message)"></div>
    </div>
  </div>
​
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js
"></script>
</body>
</html>
 
var app = angular.module("phoneApp", []);
​
app.controller("AppCtrl", function() {
    var appctrl = this;
    appctrl.callHome = function(message) {
        alert(message);
    };
});
​
app.directive("phone", function() {
    return {
        scope: {
            dial: "&"
        },
        template: '<input type="text" ng-model="value">' +
          '<div class="button" ng-click="dial({message:value})">Call home!</div>'
    };
});
Output

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

Dismiss x
public
Bin info
eggheadiopro
0viewers