在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了一些额外函数的自定义指令可以解决问题......

这是我的PLUNKER

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