var app = angular.module('plunker', ['ngRoute', 'ngAnimate']);
app.directive('myDirective', function(){
return {
controller: function($scope, $http) {
$scope.testBind = 'test text';
},
};
});
app.directive('myDir2', function(){
return {
scope: {
testBind: '='
},
template:`
<h2>Inner directive</h2>
output data: {{testBind}} <br>`,
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link href="style.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular-animate.min.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div my-directive>
<h1>Outer directive</h1>
output directive data: <br>
<input type="text" ng-model="testBind">
<hr>
<div my-dir2 testBind="testBind"></div>
</div>
</body>
</html>
/* Put your css in here */