AngularJS Tutorial - Pass attribute value to a directives








The following code shows how to pass attribute value to a directives.

Example


<!doctype html>
<html ng-app="MyApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
    <script>
var app = angular.module("MyApp", []);
<!--from  w  ww .j a  v  a  2 s  .  co  m-->
app.directive("yourWidgetBi", function() {
  return {
    restrict: "E",
    template: "<p>{{text}}</p>",
    scope: {
      text: "@text"
    }
  };
});
 
    </script>
  </head>
  <body>
     <your-widget-bi text="Hello World"></your-widget-bi>
  </body>
</html>

The code above is rendered as follows: