Question

我想要$http get请求并将结果返回给前端。在前端，我使用{{ 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范围，回报或$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);
                });
            }
    };
}]);

Valeu！

使用$ http创建一个Angular过滤器？

1 个答案: