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="drinkApp">
  <head>
    <script src="http://code.angularjs.org/1.2.5/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="AppCtrl">
      Dir1
      <drinkone flavor="ctrlFlavor"></drinkone>
      <br />
      <!-- <div drinkone flavor="ctrlFlavor"></div> -->
      Dir2
      <drinktwo flavor="ctrlFlavor"></drinktwo>
      <!-- <div drinktwo flavor="ctrlFlavor"></div>  --> 
    </div>
  </body>
</html>
 
var app = angular.module("drinkApp", []);
​
app.controller("AppCtrl", function($scope){
  $scope.ctrlFlavor = "blackberry";
});
​
app.directive("drinkone", function(){
  return {
    restrict: 'E',
    transclude: true,
    scope: {
      flavor: "="
    },
//    template: '<input type=\"text\" ng-model=\"flavor\">'
    link: function(scope, element, attrs){
      element[0].innerHTML = '<input type=\"text\" value=' + scope.flavor + '>';
      scope.flavor = "strawberry";
      element[0].innerHTML = '<input type=\"text\" value=' + scope.flavor + '>';
    }
  };
});
​
app.directive("drinktwo", function(){
  return {
    restrict: 'E',
    scope: {
      flavor: "="
    },
//    template: '<input type=\"text\" ng-model=\"flavor\">'
    link: function(scope, element, attrs){
      element[0].innerHTML = '<input type=\"text\" value=' + scope.flavor + '>';
    }
  };
}
);
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers