Pass scope variable to angular directive

 

Sometime Its required to pass the value of scope variable to directives so In this example, We are passing scope variable value from controller to directive. In Controller, we have a variable name pageTitle with value "This is Title." and we are accesing it with in directive like:

<div class="jumbotron container"><h3>{{pageTitle}}</h3></div>

 
 
 
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body ng-app="Example" class="container"> <div ng-controller="exampleController"> <page-header page-title="pageTitle"></page-header> </div> </body> </html> <script> angular.module('Example', []) .controller("exampleController", function ($scope) { $scope.pageTitle = "This is Title."; }) .directive("pageHeader", function () { return { restrict: 'E', pageTitle: '=', template: '<div class="jumbotron container"><h3>{{pageTitle}}</h3></div>' } }) </script>
Output