javascript - カスタム $compile ディレクティブは、同じスコープでのみ適用される場合があります

Question

見てくれてありがとう。私はすぐに飛び込みます：

ng-clickJSON オブジェクトには、属性を持つ HTML リンクがあり、HTML を安全にするために を使用ng-bind-htmlし$sceます。trustAsHtmlまた、カスタム ディレクティブを使用して、json がpromiseangular-compileに読み込まれた後に角度クリック リスナーをアプリにコンパイルしました。$q

一見すると、これはすべて意図したとおりに機能します...

JSON

{ 
 "text" : "Sample of text with <a data-ng-click=\"__services._animation.openModal('g');\">modal trigger</a>?" 
}

見る

<p data-ng-bind-html="__services.trustAsHTML(__data.steps[step.text])"
data-angular-compile></p>

指令

angular.module('app.directives.AngularCompile', [], ["$compileProvider", function($compileProvider) {
    $compileProvider.directive('angularCompile', ["$compile", function($compile) {
        return function(scope, element, attrs) {
            scope.$watch(
                function(scope) {
                    return scope.$eval(attrs.angularCompile);
                },
                function(value) {
                    element.html(value);
                    $compile(element.contents())(scope);
                }
            );
        };
    }])
}]);

問題：

さて、それは動作します。アプリが読み込まれ、安全な HTML が提供されng-click、モーダルが開き、パラメーターが渡されます。class='ng-binding'周囲のpタグ、生成されたhtmlのタグに表示されます。万歳！class="ng-scope"a

次の業務は、進行状況を追跡する別のモデルにそのデータを書き込み、別のビューで同じng-bind, trustAsHTML,を実行することです。angular-compile treatmentデータを兄弟オブジェクトにコピーするだけです。

ここで失敗！

<p data-ng-bind-html="__services.trustAsHTML(__state.modal.text)"
data-angular-compile></p>

同じページの同じスコープ ($rootScope) のモーダルである 2 番目のビューでは、バインドと trustAsHTML Angular が適用されます。しかし、リンクはクリック可能ではなく、タグには noclass="ng-scope"が生成されます。a

セットアップの詳細な説明が問題の理解に役立つ場合は、ここで詳しく説明します。すべての初期アプリはコンシェルジュによってセットアップされ、ほとんどのデータは $rootScope に保存されます。

    return angular
        .module('app', [
        'ngResource',
        'ngSanitize',
        'ui.router',
        'oslerApp.controllers.GuideController',
        'oslerApp.services.ConciergeService',
        'oslerApp.services.DataService',
        'oslerApp.services.LocationService',
        'oslerApp.services.StatesService',
        'oslerApp.directives.AngularCompile',

    ])
    .config(function($stateProvider, $urlRouterProvider) {
      // For any unmatched url, redirect to landing
      $urlRouterProvider.otherwise("/");

      // Now set up the states
      $stateProvider
        .state('guide', {
          url: "/guide",
          templateUrl: "views/guide.html",
          controller: 'GuideController as guide'
        })
        .state('contact', {
          url: "/contact",
          templateUrl: "views/contact.html"
        })
    })
    .run(function(ConciergeService) {
        ConciergeService.init();
    });

モーダルが独自のディレクティブにあるためかどうかを確認するために、サイト全体をリファクタリングするのに 2 日間を費やしましたが、同じテンプレートとスコープ内に配置しても、ここでは役に立たなかったようです。