2016-04-28 16 views
1

角型の方が新しいです。ボタンのカスタムテンプレートを作成したいと思います。参照のために以下に示すコードスニップ。角型ボタンカスタムタイプ

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

問題はformlyあるディレクティブ{{to.method}}がまだ評価されていないため、NG-クリックディレクティブを処理している間、私にエラーを与えます。

このようなことはできませんか?どのような角型の例でも、ボタンをテンプレートとして作っているわけではありませんが、正式にこれを行うのは概念的に間違っていますか?

EDIT:

以下

は、対応するカスタムテンプレートとJSONです:

私のようにボタンのカスタムテンプレートを作成しました:

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

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

とJSONを対応するようです

正確なエラーは次のとおりです。

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{to.method}}] starting at [{to.method}}].

+1

オブジェクトに「to」を定義しました。完全なコードを投稿してください。可能であれば、あなたの問題に対してより速い結果を得るためにいくつかのバイリンガルのリンクを投稿してください –

+0

@StarkButtowski Questionにコードを追加しました。これをチェックしてください。 – Rohit

答えて

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'); 
 
    } 
 
    } 
 
}

乾杯!

+0

新しいタイプを自分のコードにどのように統合できますか? は、formlyConfig.setType .....です。 –