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>
<meta name="description" content="Isolate Scope @" />
    <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="AppCtrl">
      
      <!-- This works -->
      <div drink-longhand flavor="strawberry"></div>
      <hr/>
      
      <!-- This works -->
      <div drink-shortcut flavor="blueberry"></div>
      <hr/>
      
      <!-- Using the shortcut inside a repeat also works -->
      <div ng-repeat="flav in ['cherry', 'grape']">
        <div drink-shortcut flavor="{{flav}}"></div>
      </div>
      <hr/>
      
      <!-- HOWEVEER: using the longhand inside a repeat DOESN'T WORK -->      
      <div ng-repeat="flav in ['cherry', 'grape']">
        <div drink-longhand flavor="{{flav}}"></div>
      </div>
      
      
      
      
    </div>
  </body>
</html>
 
var app = angular.module("drinkApp", []);
​
app.controller("AppCtrl", function($scope) {
})
​
app.directive("drinkLonghand", function() {
  return {
    scope: {},
    template: '<div>{{flavor}}</div>',
    link: function(scope, element, attrs) {
      scope.flavor = attrs.flavor;
    }
  };
});
​
app.directive("drinkShortcut", function() {
  return {
    scope: { flavor: '@'},
    template: '<div>{{flavor}}</div>'
  };
});
Output 300px

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

Dismiss x
public
Bin info
jonahxpro
0viewers