角度指令

Question

我在角度上真的很新。 我使用的是angular 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始終返回“ preview”。 從API角度來看還可以，並且response.data.content也正確。

不知道下一步該怎么做

Answer 1

挑戰在於您要執行一個異步函數並想返回它的值。 在您的代碼示例中，您已經從onPreview函數返回了，而async函數仍在后台執行。 在AngularJS你可以用承諾來解決這樣的問題：“一個服務，幫助您運行功能異步運行，並且使用的時候都做了處理它們的返回值（或例外情況）”。

但是 ：據我從看到源降價組件不支持的承諾。 onPreview方法期望返回一個字符串。 唯一的選擇是在onPreview內部onPreview直到AJAX請求返回-強烈建議不onPreview 。 因此，恕我直言，不可能在onPreview內部使用AJAX請求。

如果 bootstrap-markdown支持諾言，您可以嘗試以下操作：

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 Promise-權威指南第2部分-AngularJS 1.6的JSFiddle的更新 。