2016-06-30 6 views
2

とスコープ私はインライン版を許可するように<input type=text><div>を切り替えるディレクティブmyEditableありますAngularJsディレクティブ、値および機能

<my-editable value="vm.contact.name"></my-editable> 

を私は$scope.$applyがすべきことを言ういくつかの記事を読むまで、私はそれで幸せでした使用しないでください。

function save() { 
    scope.$apply(function(){ 
    scope.value = editor.find('input').val(); 
    }); 
    toggle(); 
} 

をしかし、それは悪いことなので、私は私の指示にコールバックメソッドを渡したい:ユーザーが(私の場合vm.contact.name)モデルを更新するために彼の変更を保存すると、私はそれを使用しています。このコールバックは、ユーザーが変更を保存するときに新しい値で呼び出される必要があります。しかし、私がディレクティブのスコープに二つのフィールドを追加することができないようだ。

return { 
    restrict: 'EA', 
    scope: { 
    value: '=value'/*, 
    onSave: '&onSave'*/ 
    }, 
    link: function(scope, element, attr) { 
    // ... 
    element.find('.save').click(function(){ 
     save(); 
    }); 

    // Declaration of `save` as above. 
    } 
} 

私はonSaveのコメントを解除した場合、値が受信されることはありませんし、onSaveは未定義です。

私の質問は、値とコールバックメソッドをディレクティブに与える方法です。 そして、ボーナスとして、どのようにコールバックにパラメータを渡すことができますか?

おかげ

+0

下の関数を渡すことができます保存()関数が呼び出された場合は? – Merlin

+0

@Lorenzoを 'link'に追加しました。ボタンまたは_Enter_キーでJQueryのクリックハンドラを使用して「保存」を呼び出す –

答えて

2

あなたはディレクティブ隔離スコープ内のフィールドの「n」の数を渡すことができます。

関数を渡す場合は、&を使用します。あなたのプロパティー名がonSaveである場合は、ビュー内でこれをon-saveのように使用してください。

あなたのディレクティブは、ビューで

以下
app.directive('dir',function(){ 
    return { 
    restrict: 'EA', 
    scope: { 

    onSave: '&' 
    }, 
    link: function(scope, element, attr) { 
    // ... 
    debugger 
    console.log(scope.onSave) 
    scope.onSave(); 

    // Declaration of `save` as above. 
    } 
} 

}) 

のようになりますあなたのような

<dir on-Save='abc()'/> 

OR

<dir on-save='abc()'/> 
+0

いいえ、私は間違ったことをしています。私はスコープを持っています:{value: '=値'、コールバック: '&onSave'} 'しかしconsole.log(scope.callback)' write(function)(locals){return parentGet(scope、locals); 'on-save'のための他の式で、'

+0

私のポストをチェックする私はディレクティブに関数を渡す方法の例を編集しました –

+0

はい、ありがとう、それは動作します。しかし、今はモデルが自動的にリフレッシュされないので、AngularsJs(ビューは更新されません)、 '$ scope。$ apply'を明示的に呼び出す必要があります。 –

関連する問題