javascript - 使用 $http 制作 Angular 过滤器？

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。

我非常确定一般设置是正确的，因为如果我只是在其中返回“it Works”，那就可以了。我认为问题出在 JS 范围、返回或我没有得到的 $http 上。

Answer 1

诺亚，

表达式被解析为 {}，因为您在过滤器定义中返回的对象实际上是空的。您正在返回一个 promise ，而 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);
                });
            }
    };
}]);

值!