Question

我在做什么？

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

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

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

我包括angular-sanitize.js来在$scope.layout变量中取消我的HTML。我还在ngSanitize声明中添加了app=angular.module()。

根据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。这不是角度有多大吗？还有其他办法吗？

Answer 1

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

而不是：

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

Answer 2

您需要做的是使用控制器中的函数执行您尝试使用jQuery执行的操作。以下是一些应该有效的代码。

mean

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

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');
      });

  }

}]);

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

谢谢，第

Angular 1.4解析ng-bind-html

2 个答案: