Question

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

我正在尝试围绕bootstrap框架构建一个指令库，以便在使用带有角度的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次，最糟糕的是没有任何事情发生。

答案我看过：

我的控制器：

.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>

将ng-click传递给模板

修改

1 个答案: