AngularJS中的指令，过滤器和异步调用

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

以及相应的HTML是 -

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

然而，这给了我一个错误说，$http未在规定范围。我该如何解决？

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

来源

2013-03-09 subzero

你在正确的轨道上，看着你的代码我看到没有理由定义$ http，但你是如何解决这个问题的？我建议您熟悉angularjs如何处理依赖关系（如$ http），您可以从这里开始：http://docs.angularjs.org/guide/di。你也是对的，$ http将是异步的，这很重要，因为JS是单线程的，你不想阻塞浏览器。为了解决这个问题，我建议返回一个承诺，或者添加一个回调参数。 – 2013-03-09 19:17:03

无法从包含'$ http'请求的过滤器中返回'ModifyString（value）'。 AJAX是异步的，所以'value'将是未定义的。需要在其他地方运行'$ http'。通过角度文档网站上的教程查看他们用于请求的结构 – charlietfl 2013-03-09 23:38:59

您能指点我一些在过滤器中使用承诺的代码吗？ – subzero 2013-03-10 03:23:16

你需要在你的过滤器提供商注入$http提供商：

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

这且不说，你应该重新考虑你的逻辑。过滤器不应该处理服务器和承诺。这就是服务和指令的目的。

来源

2013-03-09 19:37:01 Stewie

AngularJS中的指令，过滤器和异步调用

回答

相关问题