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> 

我不知道如何做到這一點

更新1： -

請看看P倫克爾 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