在 ng-bind-html 之后，hrefs 不起作用答案

【问题标题】：hrefs not working following ng-bind-html在 ng-bind-html 之后，hrefs 不起作用
【发布时间】：2017-09-18 00:17:59
【问题描述】：

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

&lt;div ng-bind-html="foo"&gt;&lt;/div&gt;

其中 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 内容中，我有一些不再有效的链接，例如

&lt;a href="#MyLink"&gt;MyLink&lt;/a&gt;

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

&lt;a name="MyLink"&gt;&lt;a&gt;

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

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

【问题讨论】：

这里有错字<a name="MyLink"><a>

标签： javascript html angularjs

【解决方案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>

【讨论】：

【解决方案2】：

首先，我想对 Stepan 说声谢谢，你的实现帮助我排除了一些事情，我会投票给你:)

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

这让我有两个选择，要么在提供 html 的应用程序（即服务层）中提供 URL 的必要部分，即 #/mypage#MyLink，要么不使用 ng-bind-html 属性并坚持使用 IFrame 并找到与之交互的替代方式。

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

【讨论】：