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="app">
<head>
<meta name="description" content="Camp NG Example 0" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="HelloCtrl as ctrl">
  
  <hello-there from="ctrl.me" to="World" foo="bar" action="ctrl.changeMe()">This if here</hello-there>
  
</body>
</html>
 
​
 
var app = angular.module("app", []);
 
app.controller("HelloCtrl", function() {
  this.me = "Chris";
  this.changeMe = function() {
    this.me = "Someone else";
  }
});
app.directive("helloThere", function(){
    return {
      transclude: true,
      scope: {
        to: "@",
        from: "=",
        action: "&",
      },
      restrict: "E",
      template: "<div ng-click='action()'>Hello {{to}} from {{from}}<ng-transclude></ng-transclude></div>"
    };
});
Output

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

Dismiss x
public
Bin info
gaslightpro
0viewers