javascript - hrefs 在 ng-bind-html 之后不工作

Question

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

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

其中foo是HTML内容

html 来自可信来源，我知道我在 Controller 类中使用的 $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 并为其提供完整的 URL，例如 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>