将响应html分配给变量，然后将html的特定部分分配给范围

Question

我得到一个json对象，这是一个完整的html页面，我想分配一部分（来自特定的html标签，如'article'和ONLY文章中的所有内容）并将其分配给$ scope并显示它在视图上。

我打电话给api，我正在使用angularjs应用程序。 下面是函数的样子以及我到目前为止所尝试的内容：

controller: /*@ngInject*/["$scope", "logger", function ($scope, logger) {
    var promise = myService.getTheData();
    promise.then(success, fail);

    function success(response) {
        var data = JSON.parse(response.data);
        //console.log(data.content);

        var $div = $(data.content);
        console.log($div);
        var test = $('div.article-head', $div);
        console.log(test);

        $scope.to.testText = test;
    }

    function fail(error) {
        logger.error('there is an error', error);
    }
}]

data.content看起来不错。它是我要求的整个html页面。但这两项任务都不奏效...... 这就是视图的样子：

<div class="alert alert-success">
{{to.testText}}</div>

这是输出的样子：

这就是控制台的样子：

Answer 1

创建一个指令，将jQuery对象附加到DOM元素：

app.directive("jqueryToHtml", function() {
    return { 
        link: postLink
    };
    function postLink(scope, elem, attrs) {
        scope.$watch(attrs.jquery, function(value) {
            if (value) {
                elem.empty();
                elem.append(value);
            };
        }); 
    }
});

用法

<jquery-to-html jquery="to.testText">
</jquery-to-html>