Question

我最初在iframe中有一些href，但是，我使用html div中的ng-bind-html将html绑定到AngularJS。 e.g。

<div ng-bind-html="foo"></div>

foo是HTML内容的地方

html来自可靠的来源，我知道$ sce.trustAsHtml（foo）函数，我在控制器类中使用它，例如。

$scope.bar = function () {
            if ($scope.foo == null)
                getFoo(Id).then(function (fooData) {
                    $scope.foo = $sce.trustAsHtml(foodata);
                })['catch'](function (reason) {
                    //do something
                });
        };

问题是在foo html内容中我有一些不再有效的链接，例如

<a href="#MyLink">MyLink</a>

我也有相应的html标签，例如。

<a name="MyLink"><a>

我确实注意到，如果我编辑#MyLink并为其提供完整的网址，例如http://MyWebsite/MyPage#MyLink就可以了。事实上＃/ mypage＃MyLink就足够了。然而，遗憾的是，我不可能/合理地为foo html提供完整的URL，因为它是由不同的应用程序呈现的。如果我删除ng-bind-html属性但这些链接都可以正常工作但我需要它。此外，如果我剪切并粘贴html浏览器渲染到新页面链接工作。这让我有点疯狂，如果有人有任何建议指出我正确的方向，我将非常感激。

我正在阅读为了让ng-functions工作我必须使用$ complile服务，但是，这些只是标准的hrefs所以我很确定我不需要这样做？我对AngularJS还是比较新的，所以我提前为我的天真道歉...

Answer 1

它按预期工作。

jsfiddle

上的示例

angular.module('ExampleApp', [])
  .controller('ExampleController', function($sce) {
    this.foo = $sce.trustAsHtml(`<a href="#MyLink">MyLink</a>`);
  });

.spacer {
  background-color: red;
  height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController as vm">
    <div ng-bind-html="vm.foo"></div>
    <div class="spacer"></div>
    <a name="MyLink">MyLink</a>
  </div>
</div>

Answer 2

首先，我想说谢谢Stepan，你的实施帮助我排除了一些事情，我会投票给你：）

基本上我的hrefs在使用ng-bind-html属性后无效的原因是因为在绑定之前它们仅限于IFrame的范围，这意味着它们不需要完整的URL等

这给我留下了两个选择，要么提供URL的必要部分，即＃/ mypage＃MyLink，在提供html的应用程序中，即服务层，或者不要使用ng-bind-html属性并坚持使用IFrame并找到另一种与之互动的方式。

到目前为止，我已经实施了第一个选项，这是可能的，但是，第二个选项可能会让自己更好地适应未来的变化。我的意思是，如果我将来从服务层提供的URL部分发生变化，它将会破坏这些链接。

ng-bind-html

2 个答案: