20

我所知道的是，当我想将 HTML 插入视图时，我使用'ng-bind-html'or '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}}按原样打印。

4

3 回答 3

44

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

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).

Working example: http://jsfiddle.net/BinaryMuse/QHhVR/

Down in the bowels of the ng-include directive, Angular's doing this very thing:

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

[Update]

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>

Working example: http://jsfiddle.net/BinaryMuse/VUYCG/

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.

于 2013-09-09T03:34:01.720 回答
1

如果重复元素的选项数量有限，则可以使用 ng-switch 代替，如果 HTML 来自服务器，则可以使用 ng-include。

于 2013-09-09T02:49:53.607 回答
0

像这样的东西？

<div ng-repeat="item in items">
    <div ng-bind-html-unsafe="item.html"></div>
</div>

在哪里

items = [
    {
        html: 'test<br/>test'
    },
    {
        html: 'test2<br/>test2'
    }
]
于 2013-09-09T03:10:51.643 回答