Angular Directive Tutorial

Directive to replace text and get which button clicked

by Prasad

HTML

<div ng-app="directiveTutorial" ng-controller="mainController">
            <button ng-click="showModelOnPage()">Open</button> 
            <model-popup ng-show="showModelFlag">
              <div>div content</div>
            </model-popup>  
        </div>

JavaScript

var directiveTutorial = angular.module('directiveTutorial', []);

directiveTutorial.controller('mainController', function($scope) {
    console.log("Main controller called");  
    $scope.showModelFlag = false;
    $scope.showModelOnPage = function() {
        $scope.showModelFlag = !$scope.showModelFlag;
        console.log($scope.showModelFlag);
    };   
}).directive('modelPopup',function(){
    return {
        restrict: "E",
        template: "<div>With replace, outer element is replaced, and its attrs moved to the inner.<button data-btnid='accept'>Accept</button><button data-btnid='reject'>Reject</button> </div>"
}})
.directive('btnid', function(){
    return function(scope, elem, attr){
            elem.bind('click',function(){
                console.log("You '"+attr.btnid+"ed' it!");
            });
}});