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
さらに、呼び出しが非同期になるため、ファイルが読み取られた後にフィルターが正しい値を返さないという問題に遭遇すると思います。