CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-ng-click
GeekOnGadgets
GeekOnGadgets

Reputation: 959

Calling function inside a directive in Angular

Sorry If this question has been asked before, but my issue is bit different and hope someone can help me out.

1) I have a Directive which has many buttons. I want to call a function on this buttons and inside a directive. But I don't know how.

// Directive for the login header to avoid the duplication of the code
angular.module('App').directive('mainHeader',function(){
    return{
        restrict: 'AE',
        template:'<h1 class="logo"> My App  </h1>'+
        '<button class="btn btn-primary">New User</button>'+
        '<button class="btn btn-primary">New Product</button>'+

            '<span class="dropdown" on-toggle="toggled(open)">'+
                '<a href class="dropdown-toggle">'+
                '<img class="userProfile" src="" alt="User Profile">'+
                '<b class="caret"></b>'+
               '</a>'+
                    // Here on my profile ????
                '<ul class="dropdown-menu pull-right">'+
                    '<li> My Profile </a> </li>'+
                    '<li class="divider"></li>'+
                       // Here on my logout ?????? 
                       // This does not work
                    '<li> <a href="" ng-click="logOut()"> Sign Out </li>'+
                '</ul>'+
            '</span>'
    }
});

My controller

(function() {
    var logOutController = function($scope){
      $scope.logOut = function(){
           // Want to call this
        }
    logOutController .$inject = ['$scope'];
    angular.module('App').controller('logOutController ',logOutController );
}());

And my view will be only one line

<div main-header></div>

I don't know how to do this

Update 1: -

Please have a look at the Plunker http://plnkr.co/edit/YONVyVvNm4pQGFMU6SkG?p=preview.

Upvotes: 0

Views: 508

Answers (1)

Esteban Felix
Esteban Felix

Reputation: 1561

You will just need to add an isolate scope to your directive:

// Directive for the login header to avoid the duplication of the code
angular.module('App').directive('mainHeader', function () {
    return {
        restrict: 'AE',
        template: '<h1 class="logo"> My App  </h1>' +
        '<button class="btn btn-primary">New User</button>' +
        '<button class="btn btn-primary">New Product</button>' +

        '<span class="dropdown" on-toggle="toggled(open)">' +
        '<a href class="dropdown-toggle">' +
        '<img class="userProfile" src="" alt="User Profile">' +
        '<b class="caret"></b>' +
        '</a>' +
            // Here on my profile ????
        '<ul class="dropdown-menu pull-right">' +
        '<li> My Profile </a> </li>' +
        '<li class="divider"></li>' +
            // Here on my logout ?????? 
            // This does not work
        '<li> <a href="" ng-click="logOut()"> Sign Out </li>' +
        '</ul>' +
        '</span>',
        scope: {
            'logOut': '&onLogOut' //<- this ties your directive's logOut function to an attr on the HTML tag
        }
    }
});

Then you just modify your HTML to:

<div main-header on-log-out="logOut()"></div>

Plunker Example

Upvotes: 1

Related Questions