插入和解析HTML眼帘使用AngularJS [英] Insert and parse HTML into view using AngularJS
问题描述
我所知道的是，当我想插入HTML眼帘，我用'NG绑定-HTML 或'NG-bind- HTML不安全。
What I know is when I want to insert HTML into view, I use 'ng-bind-html' or 'ng-bind-html-unsafe'.
我不知道叫什么，是如何插入HTML，使角解析其内容
What I don't know, is how to insert HTML and make Angular parse its content
即。如果有'NG重复，我想角度来分析呢？
i.e. if there is 'ng-repeat', I want Angular to parse it?
例如：
HTML
<div ng-repeat="t in ts" ng-bind-html-unsafe="t.html()"></div>
JS：
function Controller($scope) {
$scope.ts = {obj1: new obj(), obj2: new obj(), ob3: new obj()};
}
function obj() {
// which may be "<div ng-repeat="s in somthing">{{s}}</div>"
// or "<ul><li ng-repeat="s in somthing">{{s.k}}</li></ul>"
// or something else
var _html;
this.html = function() {
return _html;
}
}
我试着用上面的，但角只是打印 {{S}} 或 {{SK}} 因为它是。
推荐答案
您可以编译任意HTML与 $编译服务（的docs ）。
You can compile arbitrary HTML into an angular view with the $compile service (docs).
app.run(function($rootScope, $compile, $rootElement) {
// We'll create a new scope to use as the context for the view.
$scope = $rootScope.$new();
$scope.model = [{name: 'first'}, {name: 'second'}, {name: 'third'}];
// Calling `$compile(html)` returns a function that, when called with
// a context object, links the compiled HTML to the given context (e.g.
// binds scope-based expressions in the view to the passed in scope).
var html = "<div ng-repeat='m in model'>{{m.name}}</div>";
var linkingFunction = $compile(html);
var elem = linkingFunction($scope);
// You can then use the DOM element like normal.
$rootElement.append(elem);
});
在这种情况下，我已经把它贴视图到 $ rootElement的（这是自举模块时，通常是由<$ C $被使用的元素C> NG-应用指令）;在很多情况下，你会做这种事情在指令的连接功能，将有机会获得有问题的元素。你可以，当然，获得使用jQuery或jqLite原始HTML，但记得要允许至少有一个消化周期上链接的范围你这样做之前，所以（要不然HTML将还没有被使用值从范围更新）
In this case, I've attached the view to the $rootElement (which is the element that was used when bootstrapping the module, usually by the ng-app directive); in many cases, you'll do this kind of thing in a directive's linking function and will have access to the element in question. You can, of course, get the raw HTML using jQuery or jqLite, but remember to allow at least one digest cycle on the linked scope before you do so (or else the HTML won't yet have been updated with values from the scope).
的例子： http://jsfiddle.net/BinaryMuse/QHhVR/
下的的肠子NG-包括指令，<一个href=\"https://github.com/angular/angular.js/blob/4def730de706170995cfb9f62da6397b7cc18285/src/ng/directive/ngInclude.js#L195\">Angular's做这事：
$compile(currentElement.contents())(currentScope);
[更新]
下面是一个演示的东西有点接近你更新的问题更完整的示例：
Here is a more complete example that demonstrates something a bit closer to your updated question:
app.controller("MainController", function($scope) {
$scope.ts = [
{
elements: ['one', 'two', 'three'],
html: '<div ng-repeat="elem in t.elements">{{elem}}</div>'
},
{
things: [8, 9, 10],
add: function(target) {
var last = target[target.length - 1];
target.push(last + 1);
},
html: '<ul><li ng-repeat="num in t.things">{{num}}</li>' +
'<li><button ng-click="t.add(t.things)">More</button></li></ul>'
}
];
});
app.directive("bindCompiledHtml", function($compile, $timeout) {
return {
template: '<div></div>',
scope: {
rawHtml: '=bindCompiledHtml'
},
link: function(scope, elem, attrs) {
scope.$watch('rawHtml', function(value) {
if (!value) return;
// we want to use the scope OUTSIDE of this directive
// (which itself is an isolate scope).
var newElem = $compile(value)(scope.$parent);
elem.contents().remove();
elem.append(newElem);
});
}
};
});
<div ng-controller="MainController">
<div ng-repeat="t in ts" bind-compiled-html="t.html"></div>
</div>
的例子： http://jsfiddle.net/BinaryMuse/VUYCG/
这是一文不值的HTML片段使用 t.elements 和 t.things ，因为 T 是由 NG-重复在外的HTML创建的范围值。你可以做一些体操的范围，使这一点更好，如果你喜欢。
It's worth nothing that the HTML snippets use t.elements and t.things because t is the scope value that is created by the ng-repeat in the outer HTML. You could do some scope gymnastics to make this a bit nicer if you like.
这篇关于插入和解析HTML眼帘使用AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
