AngularJS 中的指令、过滤器和异步调用答案

【问题标题】：Directives, Filters and Async Calls in AngularJSAngularJS 中的指令、过滤器和异步调用
【发布时间】：2013-03-09 18:37:15
【问题描述】：

我想在 AngularJS 中声明我自己的指令，它将文件的字符串源作为属性，它必须加载，然后以某种方式修改并显示。

我有一个 AngularJS 指令和过滤器定义如下 -

app.directive("customTag", function ($compile) {
    return {
        restrict: 'E',
        require: 'src',
        scope: {
            value: "=src"
        },
        template: '<div ng-bind-html-unsafe="value | myFilter"></div>',
        replace: true
    };
});
app.filter('myFilter', function () {
    return function (value) {
        $http({
            url: value,
            method: 'GET'
        }).success(function (data, status, headers, config) {
            value = data; // gets a string value
        }).error(function (data, status, headers, config) {
            value = "Error getting content";
        });
        return ModifyString(value);
    };
});

而对应的HTML是-

<customTag src="/test.txt"></customTag>

但是，这给了我一个错误，指出$http 未在范围内定义。我该如何解决这个问题？

此外，我想我会遇到$http调用将是异步调用的问题，因此过滤器在读取文件后不会返回正确的值。

【问题讨论】：

您走在正确的轨道上，查看您的代码我认为没有理由定义 $http，但是您是如何尝试解决这个问题的？我建议您熟悉 angularjs 如何处理依赖项（如 $http），您可以从这里开始：docs.angularjs.org/guide/di。 $http 将是异步的也是正确的，这很重要，因为 JS 是单线程的，您不想阻塞浏览器。为了解决这个问题，我建议返回一个 promise，或者添加一个回调参数。
无法从包含 $http 请求的过滤器中返回 ModifyString(value)。 AJAX 是异步的，所以 value 将是未定义的。需要在其他地方运行$http。浏览 angular docs 网站上的教程，了解他们用来提出请求的结构
你能给我指出一些在过滤器中使用承诺的代码吗？

标签： javascript asynchronous filter angularjs

【解决方案1】：

您需要在过滤器提供程序中注入$http 提供程序：

app.filter('myFilter', function ($http) {...

除此之外，您应该重新考虑您的逻辑。过滤器不应该处理服务器和承诺。这就是服务和指令的用途。

【讨论】：