在AngularJS中调用ajax之后呈现动态HTML(angularjs内容)内容

前端之家收集整理的这篇文章主要介绍了在AngularJS中调用ajax之后呈现动态HTML(angularjs内容)内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是新来的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;
  }

}

提前致谢.

ng-bind-html-unsafe不可用1.2及以后版本的角…

所以你应该使用ng-bind-html来创建一个绑定,这个绑定将innerHTML以一种安全的方式将表达式计算到当前元素中.

在你的字符串中使用$scope变量使它不安全,所以你应该使用$sce.trustAsHtml,但这次你的字符串中的变量不能绑定,因为它们不会被编译…

基本上你应该编译你的字符串以绑定你的变量.这里有自定义指令,你可以创建一个可以替换为ng-html-bind的指令…

编写一个自定义指令,扩展ng-bind-html和一些额外的功能可以解决

这是我的PLUNKER

这是你的解决方案的最新JSFIDDLE

原文链接:https://www.f2er.com/angularjs/143350.html

猜你在找的Angularjs相关文章