hrefsはng-bind-htmlに続いて動作しません

Question

元々iframeにいくつかのhrefsがありますが、html divでng-bind-htmlを使用してAngularJSにhtmlをバインドします。例えばfooはHTMLコンテンツ

されるHTMLは、信頼できるソースからのものであり、私は私が使用しています$ sce.trustAsHtml（FOO）関数の意識だ

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

コントローラクラス内で

$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-functionが機能するためには、私は$ complileサービスを使用しなければならないと読んでいましたが、これは標準的なHREFなので、私はそれをする必要はないと確信していますか？私は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

にまず、Idはあなたの実装が、私はいくつかのことを除外するために助け、私はあなたを投票よ、ステパンにお礼を言うのが好き:)

ng-bind-html属性の使用後、私のhrefsが正常に動作しなかったのは、バインディングの前にIFrameの範囲に制限されていたためです。完全なURLが必要です。

これは、2つの選択肢があります。これは、htmlを提供するアプリケーション、つまりngを使用しないアプリケーションで、URLの必要な部分、つまり＃/ mypage＃MyLinkを提供するか、 -bind-html属性を使用して、IFrameに固執して、それと対話する別の方法を見つけます。

これまでのところ私は最初のオプションを実装しましたが、これは可能でしたが、おそらく2番目のオプションは将来の変更をより良くするために役立つでしょう。私は、サービスレイヤから提供しているURLの部分が将来変更された場合、これらのリンクを壊すことになります。