在 AngularJS 中调用 ajax 后呈现动态 HTML(angularjs 内容)内容 [英] Rendering dynamic HTML(angularjs content) content after ajax call in AngularJS

问题描述

我是 Angular 的新手，在进行 ajax 调用后卡住了.注入 DOM 后如何渲染/编译 html 内容，以便我仍然可以使用 AngularJs 函数.

由于我的后端设置方式，我必须通过 ajax ($http) 获取内容.我正在制作没有 jQuery 的应用程序.我试过 $compile 和 $apply 但没有用.我在这里错过了什么.

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

<小时>

HTML

<输入 ng-model="contentA"><div>输入是:{{contentA}}

<div ng-controller="MyAjax" class="section"><div id="dumpAjax">{{ajaxData}}

<按钮 ng-click=getajax()>获取 Ajax</button>

<小时>

脚本

var myApp = angular.module('myApp',[]);//myApp.directive('myDirective', function() {});//myApp.factory('myService', function() {});函数 MyCtrl($scope) {}函数 MyAjax($scope){var data = '{{contentB}}';$scope.getajax = function(){$scope.ajaxData = 数据；}}

提前致谢.

解决方案

ng-bind-html-unsafe is not available 1.2 and later verison of angular...

因此您应该使用 ng-bind-html 来创建一个绑定，该绑定将以 安全的方式将表达式的计算结果嵌入到当前元素中..

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

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

的指令

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

这是我的PLUNKER

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

I am new to Angular getting stuck after making ajax call. How do I render/compile the html content once you inject in DOM so that I can still use the AngularJs functions.

Due to the way my backend is set up I have to get content via ajax ($http). And I am making the app without jQuery. I tried $compile and $apply but didn't work. What am I missing here.

I have the code set up at http://jsfiddle.net/rexonms/RB7FQ/3/ . I want the second div content to have the same properties as the first 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>

---

SCRIPT

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

}

Thanks in advance.

解决方案

ng-bind-html-unsafe is not available 1.2 and later verison of angular...

so you should use ng-bind-html which creates a binding that will innerHTML the result of evaluating the expression into the current element in a secure way.

using $scope variable in your string make it unsafe, so you should use $sce.trustAsHtml but this time variables in your string cannot be bind because they will be not compiled...

basically you should compile your string in order to bind your variables. Here comes custom directives you can create a directive which can replace with ng-html-bind...

Writing a custom directive which extends ng-bind-html with some extra functions can be a solution...

here is my PLUNKER

and here is your updated JSFIDDLE with my solution...

这篇关于在 AngularJS 中调用 ajax 后呈现动态 HTML(angularjs 内容)内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！