javascript - Angular 1.4 解析 ng-bind-html 的内容

Question

我在做什么？

简单地说:我有一个名为 $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 进行了清理。这不是 Angular 的工作原理吗？还有其他方法吗？

Answer 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 />