将 ng-click 传递给模板

Question

我找到了一些与此问题相关的答案，但我（充其量）收到“意外令牌”错误。

我正在尝试围绕 bootstrap 框架构建一个指令库，以便在使用带有 angular 的 bootstrap 时使标记更轻，让我的工作更轻松。首先是glyph-button：

angular.module('angular-bootstrap', [])
.directive('glyphBtn', function(){

// Allowed button sizes
var _allowedSizes = ['xs', 'sm', 'lg'],
    _defaultClass = "btn-primary";

return {
  restrict :'EA',
  transclude : true,
  replace : true,
  scope : {
    clickHandler : '&ngClick',
    glyph : '@',          // The glyph name, defined at http://getbootstrap.com/css/#buttons
    size : '@',           // Size of the button, lg, sm, xs
    bsClass : '@',           // "Class" of button, default, primary, success, info, warning, danger, link
    isActiveFn : '&',        // The function which dictates the buttons "active state"
    spaces : '@'
  },
  compile : function(tElement, tAttrs){
    // Normalize to btn-primary
    if(!tAttrs.bsClass)
      tAttrs.bsClass = _defaultClass;

    // Default size is empty string
    if(!tAttrs.size)
      tAttrs.size = "";

    // Link function:
    return function(scope, element, attrs){
      scope.getSpaces = function(){
        if(parseInt(scope.spaces) > 0)
          return " "; // only one space allowed in HTML
      }
      scope.getBSClass = function(){
        return attrs.bsClass;
      }
      scope.getSize = function(){
        if(_allowedSizes.indexOf(attrs.size) == -1)
          return '';
        return "btn-" + attrs.size;
      }
    }
  },
  template : '<button type="button" class="btn {{getBSClass()}} {{getSize()}}" ng-transclude><span class="glyphicon glyphicon-{{glyph}}"></span>{{getSpaces()}}</button>'
}
})

/* Usage:
<button glyph-btn 
  glyph="align-center" 
  isActiveFn="doToggle()" 
  size="sm"
  type="primary">Some Text</button>
*/

我希望将ng-click 方法附加到指令节点，即

<button glyph-btn glyph="chevron-right" size="lg" spaces="1" ng-click="test()">Test Button</button>

但我似乎无法让 ng-click 方法“通过”到模板中按钮的 ng-click。我能得到的最好结果是它在加载时被调用了 4 次，最坏的情况是什么也没有发生。

我看过的答案：

• SO 1
• SO 2
• SO 3

我的控制器：

.controller('HomeCtrl', function($scope){
  $scope.test = function(){
    console.log("test")
  }
})

可能只是在深夜，但对于我来说，我无法弄清楚为什么添加 ng-click="clickHandler()" 会引发以下错误：

错误：语法错误：标记“clickHandler”是表达式 [test() clickHandler()] 的第 8 列中的意外标记，从 [clickHandler()] 开始。

其他一切正常，但通过 ngClick（我确定稍后我尝试 ngClass 时）它不想玩得很好。

Angular 1.0.8

编辑

抛出错误时，控制台中显示的不完整（未解析）标记为：

<button type="button" ng-click="test() _clickHandle()" class="btn {{getBSClass()}} {{getSize()}}" ng-transclude="" glyph-btn="" glyph="chevron-right"><span class="glyphicon glyphicon-{{glyph}}"></span>{{getSpaces()}}</button>

你可以看到它复制了我通过指令的属性 (test()) 传入的方法，以及从指令的 return 到 ng-click 属性的范围方法：

return {
restrict :'EA',
transclude : true,
replace : true,
scope : {
  _clickHandle : '&ngClick',
  glyph : '@',          // The glyph name, defined at http://getbootstrap.com/css/#buttons
  size : '@',           // Size of the button, lg, sm, xs
  bsClass : '@',           // "Class" of button, default, primary, success, info, warning, danger, link
  isActiveFn : '&',        // The function which dictates the buttons "active state"
  spaces : '@'
}

添加周围的<div> 是可行的，但这很愚蠢并且会破坏一些东西（CSS 等）。我错过了什么？

Answer 1

你必须将按钮包装在一个 div 中，你的问题就会消失

<div><button glyph-btn glyph="chevron-right" size="lg" spaces="1" ng-click="test()">Test Button</button></div>