Directives Practise

by rahulshivsharan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		<div class="container" ng-app="MyApp">
			<div class="well" ng-controller="myCtrl">
				<div bb-string abbra-ka-dabraa="{{actorName}}"></div>
				<p><b>{{actorName}}</b></p>
				<div bb-expression term="newTerm = actorName + ' Some Extra content'"></div>	
				<br/>
				<div bb-two-string the-name="actorName"></div>
			</div>
		</div>

JavaScript

angular.module("MyApp",[]);
			
			(function(){
				angular.module("MyApp").controller("myCtrl",myCtrl);
				angular.module("MyApp").directive("bbString",bbString);			      angular.module("MyApp").directive("bbTwoString",bbTwoString);
				angular.module("MyApp").directive("bbExpression",bbExpression);
				
				function myCtrl($scope){
					$scope.actorName = "Jim Carry";
				};
				
				function bbString(){
					var obj = {
						scope : {
							name : "@abbraKaDabraa"
						},
						template : "<input ng-model='name' />"	
					}
					
					return obj;
				};
				
				function bbTwoString(){
					var obj = {
						scope : {
							name : "=theName"
						},
						template : "<input ng-model='name' />"	
					}
					return obj;
				};
				
				function bbExpression(){
					var obj = {
						scope : { term : "&" },
						template : "<input ng-model='term' />",
						link : function(scope,element,attrs){		
							scope.term = scope.term();
						}
					}

					return obj;	
				}
			})();