Question

在我的网站上，我想标准化与其他人的链接方式，所以我做了一个指示：

<my-person id="1"></my-person>

和

app.directive('myPerson', function() {
  return {
    restrict: 'E',
    replace: 'true',
    template: '<a href="#/person/{{person.id}}">{{person.name}}</a>',
    scope: {
      person_id : '=id',
    },
    controller: function($scope, Repository) {
      Repository.getPerson($scope.person_id).then(function(p) {
          $scope.person = p;
      });
    },
  };
});

这很有效。

但是在下一步中，我希望用户写新闻，而在这些新闻中，他们想要引用其他人。基本上，我想显示一个文本

'I met <my-person id="42"></my-person> yesterday.'

但是当angularjs显示我的新闻条目的这个上下文时，那么html标签当然会被转义，也不会被编译。

有没有简单的方法来实现这一目标？这是一个显示我的问题的jsfiddle：jsfiddle link

Answer 1

您需要在ng-repeat块中编译html。

为此制定如下指令

app.directive('bindHtmlCompile', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(function () {
                    return scope.$eval(attrs.bindHtmlCompile);
                }, function (value) {
                    element.html(value);
                    $compile(element.contents())(scope);
                });
            }
        };
    }]);

现在在你的ng-repeat中添加你的指令到这样的范围：

<span class="row"  bind-html-compile="newsEntry.text"></span>

工作代码here

参考here

显示包含指令的文本

1 个答案: