AngularJS Tutorial - Pass Data into a Directive

@ is a binding strategy telling AngularJS to copy the value provided by the attribute some-property in the DOM to the value of someProperty on our scope object:

restrict: 'AE' means that my-directive can be used only in element (E), an attribute (A).

Example

The following code shows how to pass Data into a Directive.


<!doctype html>
<!--<!--from www. jav a 2  s.c o  m-->
Copyright (c) 2014 by auser (http://jsbin.com/eloKoDI/1/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<html ng-app="myApp">
<head>
  <link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>

<div my-directive
     my-url="http://example.com"
     my-link-text="Click me"></div> 
  
<script id="jsbin-javascript">
angular.module('myApp', [])

.directive('myDirective', function() {
  return {
    restrict: 'AE',
    replace: true,
    scope: {
      myUrl: '@',       // binding strategy
      myLinkText: '@'   // binding strategy
    },
    template: '<a href="{{myUrl}}">{{myLinkText}}</a>'
  };
});
</script>
</body>
</html>

The code above is rendered as follows: