在AngularJS中的Ajax调用后呈现动态HTML（angularjs内容）内容

Question

我是刚接触Angular的人，在拨打Ajax电话后被卡住了。注入DOM后，如何呈现/编译html内容，以便仍可以使用AngularJs函数。

由于后端的设置方式，我必须通过ajax（$ http）获取内容。我正在制作没有jQuery的应用。我尝试了$ compile和$
apply，但是没有用。我在这里想念什么。

我在http://jsfiddle.net/rexonms/RB7FQ/3/上设置了代码。我希望第二个div内容具有与第一个div相同的属性。

的HTML

<div ng-controller="MyCtrl" class="section">
  <input ng-model="contentA">
  <div>
      And the input is: {{contentA}}
  </div>
</div>

<div ng-controller="MyAjax" class="section">
  <div id="dumpAjax">
    {{ajaxData}}
  </div>
  <button ng-click=getajax()> Get Ajax</button>
</div>

脚本

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {

}

function MyAjax($scope){
  var data = '<input ng-model="contentB">{{contentB}}';

  $scope.getajax = function(){
    $scope.ajaxData = data;
  }

}

提前致谢。

Answer 1

ng-bind-html-unsafe不可用 1.2及更高版本的角度 …

因此，您应该使用ng-bind-html来创建一个绑定，该绑定将使innerHTML以 安全的方式 将表达式评估为当前元素的结果。

$scope在您的字符串中使用变量使其不安全，因此您应该使用，$sce.trustAsHtml但是这次字符串中的变量无法绑定，因为它们不会被编译…

基本上，您应该 编译 字符串以绑定变量。自定义指令来了，您可以创建一个可以替换为 ng-html-bind 的指令…

编写一个扩展ng-bind-html了一些额外功能的自定义指令可以是一个解决方案…

这是我的朋克

这是您使用我的解决方案更新的JSFIDDLE …