<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<h2>Hello Plunker</h2>
<display-box>
<div>My favourite series</div>
<ul>
<li>Breaking Bad</li>
<li>The Big bang Theory</li>
<li>Game of thrones</li>
</ul>
<div>{{message}}</div>
</display-box>
</body>
</html>
// Code goes here
angular.module('myApp', []);
angular.module('myApp').controller('myCtrl', function($scope) {
$scope.message="What is yours?";
console.log('controller',$scope)
});
angular.module('myApp').directive('displayBox', function() {
return {
restrict: 'EA',
templateUrl: 'displayBox.html',
controller: function($scope) {
$scope.hidden = false;
$scope.close = function() {
$scope.hidden = true;
}
$scope.message = "overriding text";
},
transclude: true,
scope: true /* creates new scope for contents inside the directive(coz of transclude property)
and that scope skips the controller scope inside directive.
This is why text will not be overridden*/
}
})
/* Styles go here */
<div class="well" style="width=350px;" ng-hide="hidden">
<div style="float:right;margin-top:0px;">
<i class="glyphicon glyphicon-remove" ng-click="close()" style="cursor:pointer"></i>
</div>
<div ng-transclude></div>
</div>