AngularJS Tutorial - Bind value to custom directive

The following code shows how to bind value to custom directive.

Example


<!--   ww w .j ava  2s .  co  m-->
<!doctype html>
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2014 by auser (http://jsbin.com/IteNita/1/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>

  <label>Their URL field:</label>
  <input type="text" ng-model="theirUrl">
  <div my-directive
       some-attr="theirUrl"
       my-link-text="Click me to go to Google"></div>

  <script>
    angular.module('myApp', [])
    .directive('myDirective', function() {
      return {
        restrict: 'A',
        replace: true,
        scope: {
          myUrl: '=someAttr',
          myLinkText: '@'
        },
        template: '\
          <div>\
            <label>My Url Field:</label>\
            <input type="text" ng-model="myUrl" />\
            <a href="{{myUrl}}">{{myLinkText}}</a>\
          </div>\
        '
      }
    })
  </script>

</body>
</html>

The code above is rendered as follows: