使用AngularJS插入并解析HTML到视图

我所知道的是当我想将HTML插入到视图中时，我使用’ng-bind-html’或’ng-bind-html-unsafe’。

我不知道的是如何插入HTML并使Angular解析其内容

即如果有’ng-repeat’，我想要Angular来解析呢？

更新1：

例：

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

我尝试使用上述方法，但Angular只是打印{{s}}或{{s.k}}。

您可以使用$ compile服务( docs)将任意HTML编译成角度视图。

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(这是引导模块时使用的元素，通常是由ng-app指令);在许多情况下，您将在指令的链接功能中执行此类操作，并可访问该元素。当然，您可以使用jQuery或jqLite获取原始HTML，但请记住在链接的范围之前至少允许一个摘要循环(否则HTML将不会被范围内的值更新) 。

工作实例：http://jsfiddle.net/BinaryMuse/QHhVR/

在ng-include指令的下方，Angular’s doing this very thing：

$compile(currentElement.contents())(currentScope);

[更新]

这是一个更完整的例子，它演示了一些更接近你更新的问题：

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是由外部HTML中的ng-repeat创建的范围值。你可以做一些范围体操，使它更好一点，如果你喜欢。

使用AngularJS插入并解析HTML到视图

猜你在找的Angularjs相关文章