使用 $http 制作 Angular 过滤器？

Question

我想执行 $http get 请求并将结果 return 发送到前端。在前端，我使用{{ URL-STRING | iframely }}。

'use strict'

angular.module( 'iframely', [] ).filter( 'iframely', [ '$http', function ( $http ) {
    return function ( url ) {

        var result = $http( {
            url: 'http://localhost:8061/iframely',
            method: 'GET',
            params: {
                url: url
            }
        })

        return( result.then( function ( result ) {
            console.log( result.data.html )
            return result.data.html
        }))
    }
}])

结果在前端我刚得到{}（看起来像一个空对象）。但是我的控制台日志显示了所需的 HTML.

我很确定总体设置是正确的，因为如果我只是在其中执行 return "it works"，就可以了。我认为问题出在我没有得到的 JS 范围，returns 或 $http。

Answer 1

诺亚，

表达式正在解析为 {}，因为您在过滤器定义中返回的对象实际上是空的。您正在返回一个承诺，而 AngularJS 只是在您的 HTML 中打印返回的对象 - 而不是您可能期望的解析值。

在这种情况下，您使用 AngularJS 过滤器的方式不当。为了获得您想要的功能，您应该创建一个指令。您可以在 HTML:

中按以下方式使用该指令

<iframely url="{{ URL-STRING }}"></iframely>

并用以下代码实现：

angular
    .module('app', [] )
    .directive('iframely', ['$http', '$sce', function ($http, $sce) {
        return {
            replace: true,
            restrict: "E",
            scope: {
                url: '@'
            },
            template: '<div ng-bind-html="content"></div>',
            link: function(scope, element, attrs) {
                $http({
                    url: attrs.url,
                    method: 'GET'
                })
                .then(function (result) {
                    scope.content = $sce.trustAsHtml(result.data.html);
                });
            }
    };
}]);

值！

使用 $http 制作 Angular 过滤器？

Making an Angular filter using $http?

javascript

scope

angularjs

angular-filters