使用 Jade 将 Angular 指令属性作为类链接到其模板答案

【问题标题】：Linking an Angular directive attribute to its template as a class with Jade使用 Jade 将 Angular 指令属性作为类链接到其模板
【发布时间】：2016-07-22 00:05:49
【问题描述】：

我正在尝试在我的自定义 Angular 指令的标记中传递一个属性，并将该属性分配为该指令模板的容器之一中的一个类。

这是我的输入在 Jade 中的样子：

.form-layout-group
  short-text-input.item(label="Short Input Group", inputColumnsClass="short-text-2")

这是返回我的指令的函数：

function ShortTextInput (FormControlService) {
  restrict: 'E',
  replace: true,
  require: ['^validationForm', '?ngModel', '^?formCollection'],
  scope: {
    inputColumnsClass: '@'
  },
  templateUrl: '/templates/input/shortTextInput/short-text-input.html',
  link: FormControlService.link
})

在我的模板中，我正在尝试以下操作：

include ../../input/_input-mixins.jade

+WrapInputwithLabelAndErrorplaceholder
  div.inner-icon
    div(class="{{ inputColumnsClass }}")
      +InputwithValidation.item

不幸的是，我无法让这个列类显示出来，并以我喜欢的方法实际设置输入样式。当我将这个类硬编码到我的模板中时，我打算做的事情就很好了。

关于我应该如何处理这个问题的任何提示？

【问题讨论】：

是的，就是这样！不敢相信我错过了。
@estus 使用该信息编写答案，以便未来用户可以轻松接受和查看。
@ArianFaurtosh 当然。

标签： angularjs angularjs-directive pug

【解决方案1】：

应该是input-columns-class="short-text-2"。

input-columns-class DOM 属性是normalized 到inputColumnsClass 驼峰形式的$compile 服务，而inputColumnsClass DOM 属性被规范化为inputcolumnsclass。

【讨论】：