Pass Data into a Directive
Description
@ 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 w w w . j av a2 s . c om-->
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>