指示灯

Question

私は本当に新しい角度です。 角度1.6を使用しているIm、私は既存のアプリでいくつかの変更を行う必要があります。

私が検索できるように、前の開発者はhttp://www.codingdrama.com/bootstrap-markdown/を使用して、いくつかのテキストオプションとプレビューを含むテキストエリアを持っていました。私の仕事はプレビューボタンをオーバーライドして、テキストを挿入してAPIを呼び出すことです。APIは結果を返します。そのマークダウンの文書で、私はこれを見つけました。

onPreview：機能（E）{ のvar previewContent

if (e.isDirty()) { 
    var originalContent = e.getContent() 

    previewContent = "Prepended text here..." 
     + "\n" 
     + originalContent 
     + "\n" 
     +"Apended text here..." 
} else { 
    previewContent = "Default content" 
} 

return previewContent 

}、

は、だから私はそれを無効にするために開始しました：

app.directive("markdowntextarea", ['$http', function ($http) { 
    return { 
     link: function (el_scope, element, attr) { 
      var previewContent = "preview"; 
      element.markdown(
       { 
        autofocus: false, 
        savable: false, 

        onPreview: function (e) { 
         console.log('1'); 
         if (e.isDirty()) { 
          console.log('2!!') 
          var originalContent = e.getContent(); 
          $http({ 
           url: '/api/markdown/', 
           data: {"body": originalContent, "actual_format": "md", "desire_format": "html"}, 
           method: 'POST' 
          }).then(function successCallback(response) { 
           console.log(response.data.content); 
           previewContent = response.data.content; 
          }); 
         }else{ 
          console.log('3') 
          previewContent = ""; 
         } 
         previewContent = 'test'; 
         return previewContent; 
        }, 
       }); 
     } 
    } 
}]); 

私は私が持っているエラーを見つけることができませんpreviewContentは常に「プレビュー」を返します。 API側からはOK、response.data.contentも正しいです。

は、チャレンジは、あなたが非同期関数を実行し、それが価値だ返すようにしたいということです何をすべきか、次

Answer 1

見当がつかない。コード例では、既にonPreview関数から返されていますが、async関数はバックグラウンドで実行されています。 AngularJSでpromisesを使用すると、この種の問題を解決できます。"関数を非同期で実行し、処理が完了したときに戻り値（または例外）を使用するのに役立つサービス"。

BUT：これまでのところ、sourceから見ると、マークダウンコンポーネントは約束をサポートしていません。 onPreviewメソッドは、文字列が返されることを期待しています。唯一の選択肢は、AJAXリクエストが返るまでonPreviewを待つことです。これは強くお勧めします。ですから、onPreviewの内部でAJAXリクエストを使用することはできません。ブートストラップ・値下げはあなたがこれを試みることができる約束支持するだろうのIF

：

app.directive("markdowntextarea", ['$http', '$q', function ($http, $q) { // inject $q 
... 
onPreview: function (e) { 
    console.log('im here!!'); 
    var deferred = $q.defer(); 
    if (e.isDirty()) { 
     var originalContent = e.getContent(); 
     $http({ 
      url: '/api/markdown/', 
      data: {"body": originalContent, "code": "a"}, 
      method: 'POST' 
     }).then(function successCallback(response) { 
      console.log("successCallback", response.data.content); 
      deferred.resolve(response.data.content); 
     }, function errorCallback(response) { 
      console.log("errorCallback"); 
      deferred.reject("error"); 
     }); 
    } else { 
     // quando esta vazio 
     deferred.resolve(""); 
    } 
    return deferred.promise; 
}, 
... 

は、ここでのコンセプトを実証JSFiddleです。 AngularJS 1.6へのDave KerrのAngularJS Promises - The Definitive Guide Part 2 - JSFiddleのアップデートです。