<div my-directive
my-url="http://google.com"
my-link-text="Click me to go to Google"></div>
angular.module('myApp', []) .directive('myDirective', function() { return { restrict: 'A', replace: true, scope: { // isolate scope myUrl: '@', // binding strategy myLinkText: '@' // binding strategy }, template: '<a href="{{myUrl}}">' + '{{myLinkText}}</a>' } })
myUrl: '@' expects my-url
if we want to use another attribute value, eg. some-attr, we can change to
myUrl: '=someAttr'