0

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

我正在尝试围绕引导框架构建一个指令库，以使标记更轻，并且在使用带有角度的引导时我的工作更轻松。首先是一个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")
  }
})

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

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

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

角 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等）。我错过了什么？

4

1 回答 1

1

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

<div><button glyph-btn glyph="chevron-right" size="lg" spaces="1" ng-click="test()">Test Button</button></div>
于 2013-11-01T10:17:43.987 回答