Question

我在角度方面真的很新。我使用角度1.6，我需要在现有的应用程序上做一些更改。

正如我可以搜索的那样，之前的开发人员正在使用http://www.codingdrama.com/bootstrap-markdown/来创建带有一些文本选项和预览的文本区域。我现在的任务是覆盖预览按钮，在插入文本的情况下调用我们的API，API返回一些结果。关于那次降价的文档，我加起来发现了这个。

onPreview：function（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始终返回＆＃34;预览＆＃34;。从API方面来看还可以，response.data.content也是正确的。

不知道下一步该怎么做

Answer 1

挑战在于您执行异步函数并希望返回它的值。在您的代码示例中，您已经从onPreview函数返回，而异步函数仍在后台执行。在AngularJS中，您可以使用promises来解决此类问题：＆＃34;一种帮助您异步运行函数的服务，并在完成处理时使用它们的返回值（或异常）。 。

但是：从source我可以看到，降价组件不支持承诺。 onPreview方法需要返回一个字符串。唯一的选择是在onPreview内等待直到AJAX请求返回 - 这是强烈不鼓励的。所以恕我直言，不能在onPreview内使用AJAX请求。

IF 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 1.6的AngularJS Promises - The Definitive Guide Part 2 - JSFiddle的更新。

指令有角度

1 个答案: