Passing data into a directive

 

<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'