指令角

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。