Javascript AngularJS中的指令、筛选器和异步调用

我想在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);
    };
});

app.directive（“customTag”），函数（$compile）{
返回{
限制：'E'，
要求：'src'，
范围：{
值：“=src”
},
模板：“”，
替换：正确
};
});
app.filter（'myFilter'，函数（）{
返回函数（值）{
$http({
url:value，
方法：“获取”
}).success（函数（数据、状态、标题、配置）{
value=data；//获取字符串值
}).error（函数（数据、状态、标题、配置）{
value=“获取内容时出错”；
});
返回ModifyString（值）；
};
});

相应的HTML是-

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

但是，这给了我一个错误，即

$http

未在范围中定义。我该如何解决这个问题

---

此外，我认为我将遇到一个问题，

$http

调用将是一个异步调用，因此在读取文件后筛选器将不会返回正确的值。

您需要在筛选器提供程序中插入

$http

提供程序：

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

---

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

您的思路是正确的，查看您的代码，我看不出需要定义$http的原因，但您是如何尝试解决这一问题的？我建议您熟悉angularjs如何处理依赖项（如$http），您可以从这里开始：。您还说得对，$http将是异步的，这一点很重要，因为JS是单线程的，您不想阻止浏览器。要解决此问题，我建议返回承诺或添加回调参数。无法从包含

$http

请求的筛选器返回

ModifyString（value）

。AJAX是异步的，因此

值

将是未定义的。需要在别处运行

$http

。浏览angular docs网站上的教程，了解他们提出请求时使用的结构。你能给我指出一些在过滤器中使用承诺的代码吗？