指令角

Question

我真的是新的角度。 即時通訊使用角1.6，我需要做一些現有的應用程序的變化。

正如我可以搜索，以前的開發人員使用http://www.codingdrama.com/bootstrap-markdown/有一個textarea與一些文本選項和預覽。我現在的任務是覆蓋預覽按鈕，以插入文本和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方面來說還行，response.data.content也是正確的。

不知道下一步該怎麼做

Answer 1

所面臨的挑戰是，你執行一個異步函數，並希望返回它的值。在您的代碼示例中，您已經從onPreview函數返回，而異步函數仍在後臺執行。在AngularJS中，您可以使用promises來解決這類問題：「幫助您異步運行功能的服務，並在完成處理」「時使用它們的返回值（或例外）。

但是：據我所知，從source減價組件不支持承諾。 onPreview方法期望返回一個字符串。唯一的選擇是在onPreview之內等待，直到AJAX請求返回 - 這是非常不鼓勵的。所以恕我直言，它不可能在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演示概念。這是Dave Kerr的AngularJS 1.6的更新版AngularJS Promises - The Definitive Guide Part 2 - JSFiddle。