角形按钮自定义类型答案

【问题标题】：angular formly button custom type角形按钮自定义类型
【发布时间】：2017-02-10 05:47:05
【问题描述】：

我是角度形式的新手。我想为按钮创建一个自定义模板。下面给出的代码片段供参考。

<script type="text/ng-template" id="button.html">
    <md-button class={{to.class}} ng-click={{to.method}}>{{to.label}}</md-button>
</script>

问题是在处理 ng-click 指令时给我一个错误，因为指令 {{to.method}} 尚未评估。

难道不能做这样的事情吗？角度形式的例子都没有将按钮作为模板，在形式上这样做在概念上是错误的吗？

编辑：

下面是对应的自定义模板和JSON：

我已经为按钮创建了一个自定义模板：

<script type="text/ng-template" id="button.html">
    <md-button class={{to.class}} ng-click="{{to.method}}">{{to.label}}</md-button>
</script>

对应的JSON为：

{
type: 'button',
templateOptions: {
   label: 'Create Item',
   class: 'md-raised md-primary',
   method: 'createItem'
}

具体错误如下：

错误：[$parse:syntax] 语法错误：从 [{to.method}}] 开始的表达式 [{{to.method}}] 第 2 列中的标记“{”无效键。

【问题讨论】：

您在哪里定义了对象 to。发布你完整的代码。如果可能，请发布一些小提琴链接，以便更快地解决您的问题。
@StarkButtowski 我在问题中添加了代码。请检查一下。

标签： javascript angularjs angular-material angular-formly

【解决方案1】：

我遇到了类似的问题，这是我为解决它所做的。为可能有相同问题的其他人发帖，因为有关按钮的文档似乎很少。

注意：角度属性不需要大括号

设置类型：

formlyConfig.setType({
  name: 'button',
  template: '<button class="{{to.class}}" ng-click="to.method()">{{to.label}}</button>'
});

然后将其添加到表单中：

{
  key: 'myBtn',
  type: 'button',
  templateOptions: {
    class: 'btn-primary',
    label: 'My Test Button',
    method: function() {
     alert('test');
     console.log('test');
    }
  }
}

干杯！

【讨论】：