Функция вызова внутри директивы в Angular

Question

Извините Если этот вопрос задан раньше, но моя проблема немного другая и надеюсь, что кто-то может мне помочь.

1) У меня есть Директива, которая имеет много кнопок. Я хочу вызвать функцию на этих кнопках и внутри директивы. Но я не знаю, как это сделать.

// 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>' 
    } 
}); 

Мой контроллер

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

И моя точка зрения будет только одна линия

<div main-header></div> 

Я не знаю, как это сделать

Update 1: -

Пожалуйста, взгляните на P lunker http://plnkr.co/edit/YONVyVvNm4pQGFMU6SkG?p=preview.

Answer 1

Вам просто нужно добавить изолят рамки для вашей директивы:

// 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 
     } 
    } 
}); 

Тогда вы просто измените HTML для:

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

Plunker Example