custom Directives

Angular JS

by manoj_antony32

HTML

<div ng-controller="myCtrl">
 <ul>
   <li ng-class="{active:tab==1}">
     <a tab="1" tab-select>Tab Container1</a>
   </li>
   <li ng-class="{active:tab==2}">
     <a tab="2" tab-select>Tab Container2</a>
   </li>
 </ul>
  
  <div ng-if="container1" id="container1" style="border: 1px solid grey;">
    Hello from container 1
  </div>
  <div ng-if="container2" id="container2" style="border: 1px solid grey;">
    Hello from container 2
  </div>
</div>

CSS

li.active {
  color: red;
}

JavaScript

var myApp = angular.module('myApp', [])

.controller("myCtrl", function($scope){
	$scope.tab = 1;
	$scope.container1 = true;
  $scope.container2 = false;
});

myApp.directive('tabSelect', function($parse){
	return {
  		restrict: 'A',
      scope: false,
      compile: function(scope, tElement, tAttrs){
      		return {
            post: function(scope, iElement, iAttrs) {
              iElement.on('click', function(){
								if(iAttrs.tab == "1"){
                	scope.tab = 1;
                  scope.container1 = true;
                  scope.container2 = false;
                } else {
                	scope.tab = 2;
                  scope.container2 = true;
                  scope.container1 = false;
                }
								scope.$apply();
              });
            }
          }
      }
  }
});