如何在指令中定義兩個ng-click函數？

Question

這是我在模板中的代碼。

<button ng-click="{{backFunction}}" ng-show="{{backShow}}"> Back </button> 
    <button ng-click="{{nextFunction}}" ng-show="{{nextShow}}"> Next </button> 

指令代碼

directive('navigationButtons', function() { 
    return { 
     restrict: 'AE', 
     templateUrl : 'angular/app/partials/navigationButtons.html', 
     scope: { 
      backFunction: '@', 
      backShow: '@', 
      nextFunction: '@', 
      nextShow: '@' 
     } 

     }; 
}) 

查看代碼（這裏我使用的指令）

<navigation-buttons nextFunction="a.active=true" nextShow="true" backFunction="b.active=false" backShow="true"></navigation-buttons> 

它是示值誤差爲Syntax Error: Token 'nextFunction' is unexpected

Answer 1

你在喲一些錯誤我們的代碼，首先，在你的模板，你必須改變短線分隔的駝峯名稱，並刪除大括號

<button ng-click="backFunction()" ng-show="backShow"> Back </button> 
<button ng-click="nextFunction()" ng-show="nextShow"> Next </button> 

現在，在你的指令替換範圍隔離：

directive('navigationButtons', function() { 
return { 
    restrict: 'AE', 
    templateUrl : 'angular/app/partials/navigationButtons.html', 
    scope: { 
     backFunction: '&', 
     backShow: '@', 
     nextFunction: '&', 
     nextShow: '@' 
    } 
}; 

我創建了一個jsfiddle與您的代碼工作：http://jsfiddle.net/v7V6y/

最好！

Answer 2

你應該接收功能與&而不是@

也收到顯示/隱藏布爾與=如果你需要雙向綁定&不想設置$手錶/ $觀察

directive('navigationButtons', function() { 
    return { 
     restrict: 'AE', 
     templateUrl : 'angular/app/partials/navigationButtons.html', 
     scope: { 
      backFunction: '&', 
      backShow: '=', 
      nextFunction: '&', 
      nextShow: '=' 
     } 

     }; 
}) 

檢查這個環節上passing functions to directive

編輯

也檢查了這great article的指令