Question

我有以下代码：

$http({method: 'GET', url: 'api/participants/areyouhuman'})
            .success(function(data, status, headers, config) {
                console.log(data);
                $('.result').html(data);
                //$('.result').append('<p>Test</p>');

        })
        .error(function(data, status, headers, config) {
            console.log('error');
        });

data有这个：

'<div id="AYAH">mk</div><script src="https://ws.areyouahuman.com/ws/script/8e53b417da61504de194550d3a6bf05c65d2a2b1" type="text/javascript" language="JavaScript"></script>'

成功回调执行视图不反映新的html。

我有以下HTML代码：

     <div class="form-group">
            <div class='result'></div>
     </div>

你可以告诉我在哪里做错了吗？或者你有任何其他方法吗？

Answer 1

使用AngularJS时为什么要使用jQuery？
是jQuery加载的吗？
此代码适用于我：http://jsfiddle.net/Schniz/j7p2zxrs/
我建议您更改$scope而不是自己控制DOM。这是有角色的工作..

Answer 2

你需要改变两件事。

不要操纵Controller内的DOM元素（这是一种不好的做法），而是使用普通的Angular数据绑定：

$http({method: 'GET', url: 'api/participants/areyouhuman'})
  .success(function(data, status, headers, config) {
    console.log(data);
    $scope.htmlData = data;
})
.error(function(data, status, headers, config) {
    console.log('error');
});

为了呈现外部HTML内容，您需要使用ng-bind-html指令：

<div class="form-group">
  <div class='result' ng-bind-html="htmlData"></div>
</div>

如果您收到$sce:unsafe错误，则必须告诉Angular使用$sce服务“信任”该HTML，如下所示：

$http({method: 'GET', url: 'api/participants/areyouhuman'})
    .success(function(data, status, headers, config) {
        console.log(data);
        $scope.htmlData = $sce.trustAsHtml(data);
        ...

（不要忘记将$sce作为依赖项添加到控制器）

Answer 3

使用以下代码段进行更新：

$http({method: 'GET', url: 'api/participants/areyouhuman'})
        .success(function(data, status, headers, config) {
            console.log(data);
            $scope.content = data;
            //$('.result').html(data);
            //$('.result').append('<p>Test</p>');

    })
    .error(function(data, status, headers, config) {
        console.log('error');
    });

HTML：

<div class="form-group">
        <div class='result'>{{content}}</div>
</div>

Answer 4

这里首先要做的是，你不应该像Angularjs那样进行DOM操作。由于Angular具有强大的双向绑定，因此您的代码就像这样

// I assume you're calling an ajax request in a controller
$http({method: 'GET', url: 'api/participants/areyouhuman'})
        .success(function(data, status, headers, config) {
            // Have a scope variable within the same scope will help you 
            $scope.dataAjax = data;
    })
    .error(function(data, status, headers, config) {
        console.log('error');
    });

然后在您的HTML中，您可能需要这个

<div class="form-group">
    <div class='result'>{{dataAjax}}</div>
 </div>

如果您的返回HTML数据与应用有关，可能您考虑使用$ scope。$ apply（）来更新DOM。

jquery方法不是从angular回调调用？

4 个答案: