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()) 的属性传入的方法,以及将指令中的范围方法复制returnng-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 回答