Angular 1.4 解析 ng-bind-html 的内容答案

【问题标题】：Angular 1.4 parse contents of ng-bind-htmlAngular 1.4 解析 ng-bind-html 的内容
【发布时间】：2016-05-05 06:05:10
【问题描述】：

我在做什么？

简要说明：我有一个名为 $scope.myData 的对象数组和一个名为 $scope.layout 的字符串。我想做的是与ng-repeat="x in myData" 和ng-bind-html="layout" 建立一个跨度。布局在几个位置有{{ x.key }}。我希望它加载布局，然后开始为数组中的每个对象显示它，并填写变量。

更具体地说：我正在通过 AJAX（使用 jQuery）加载数据和布局。我不确定这是否重要，因为其他一切正常。

到目前为止我有什么代码？

我在 $scope.layout 变量中包含了 angular-sanitize.js 以取消对我的 HTML 进行消毒。我还在app=angular.module() 声明中添加了ngSanitize。

在 AJAX 内容下，您实际上只需要阅读 if(status=='success'){} 内的内容，因为该部分有效。

<script type="text/javascript">
    $(document).ready(function(){
        $('a.doit').click(function(e){
        e.preventDefault();

        $.ajax({
            method:'POST',
            data:{'ajax':true},
            url:'<?=URL('--url to load from--')?>'
        }).always(function(data,status){
            if(status=='success'){
                var getelementby='[ng-app="myApp"]';
                window.data=data;
                angular.element(document.querySelector(getelementby)).scope().$apply(function($scope){
                    $scope.layout=window.data.layout;
                    $scope.myData=window.data.data;
                });
            }else{
                console.log('Error :(');
            }
        });
    });
});

var app=angular.module('myApp',['ngSanitize']);

app.controller('myCtrl',function($scope,$http){$scope.myData={};});
</script>

<a href="#" class="doit btn btn-default">Load</a>

<div ng-app="myApp" ng-controller="myCtrl">
   <span ng-repeat="x in myData"><span ng-bind-html="layout"></span></span>
</div>

（到目前为止，我知道我的错误检查很粗糙）

它有什么作用？它显示布局正确的次数，但它不填充{{ x.key }} 表达式。

我可能做错了什么？我已经对我的 HTML 进行了消毒。这不是角度的工作原理吗？还有其他方法吗？

【问题讨论】：

您不应该将 jQuery ajax 与 angular 一起使用。尝试使用服务：docs.angularjs.org/guide/services
我认为您这样做不是“AngularJS 方式”。使用 Angular，您应该将 jQuery 的使用减少到最低限度。最好的办法是永远不要使用它。对于基本应用程序，您根本不需要它。（如果您需要 jQuery 将其添加到指令中。）您不应该像尝试的那样使用 ajax 请求加载视图。您应该为此使用路由器。请查看angular-ui-router 的文档。
我使用的是 jQuery ajax，因为我使用的是 jQuery 的 click() 函数，但我不确定在函数内部如何使用 $http
@AWolf 感谢您的意见。正如我在另一条评论中所说，这只是尝试向主要后端项目添加一个薄的角度层，但我现在看到我只是不明白角度是如何被使用得足够好来证明添加它是合理的这样的结局。不过谢谢

标签： javascript jquery html angularjs ajax

【解决方案1】：

您不应该通过 ng-bind-html 加载 Angular 模板。

而不是这个：

// controller 
$scope.templ = '{{ x }}';

// template 
<div ng-bind-html="templ"></div>

将模板移动到它自己的指令中：

// someDirective.js
angular.module('my.module').directive('myTemplate', function () {
  return {
    template: '{{ x }}'
  };
});

并在您的原始模板中使用该指令：

<some-directive />

【讨论】：

感谢您的意见。老实说，我打算在一个主要为后端的项目中添加一个轻量级的 Angular 层，但此时我显然对 Angular 的理解还不够好，无法尝试这个。

【解决方案2】：

您需要做的是使用控制器中的函数来执行您尝试使用 jQuery 执行的相同操作。这是一些应该可以工作的代码。

app.controller('myCtrl',['$scope', '$http', function($scope,$http){

  $scope.myData={};

$scope.getAjaxData = function(){

    $http({
      method: 'POST',
      data:{'ajax':true},
      url: '/someUrl'
    }).then(function successCallback(response) {

            $scope.myData = response.data;  

      }, function errorCallback(response) {

            console.log('error');
      });

  }

}]);

然后在您的 HTML 中尝试使用以下内容显示数据...

<a ng-click="getAjaxData()" class="doit btn btn-default">Load</a>
<span ng-repeat="x in myData">
  <p ng-bind="x.key"></p>
  <p ng-bind="x.value"></p>
</span>

这只是一个粗略的例子。试试看它是否有效。

谢谢，帕拉斯

【讨论】：