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中的指令，過濾器和異步調用

回答

相關問題