132

状況

Angular アプリ内にネストされているのは、ng-bind-html-unsafe 属性を持つ div を含むコントローラーによってサポートされる Page というディレクティブです。これは、'pageContent' という $scope var に割り当てられます。この変数には、データベースから動的に生成された HTML が割り当てられます。ユーザーが次のページに移動すると、DB への呼び出しが行われ、pageContent 変数がこの新しい HTML に設定され、ng-bind-html-unsafe を介して画面上にレンダリングされます。コードは次のとおりです。

ページ ディレクティブ

angular.module('myApp.directives')
    .directive('myPage', function ($compile) {

        return {
            templateUrl: 'page.html',
            restrict: 'E',
            compile: function compile(element, attrs, transclude) {
                // does nothing currently
                return {
                    pre: function preLink(scope, element, attrs, controller) {
                        // does nothing currently
                    },
                    post: function postLink(scope, element, attrs, controller) {
                        // does nothing currently
                    }
                }
            }
        };
    });

Page ディレクティブのテンプレート(上記の templateUrl プロパティの「page.html」)

<div ng-controller="PageCtrl" >
   ...
   <!-- dynamic page content written into the div below -->
   <div ng-bind-html-unsafe="pageContent" >
   ...
</div>

ページコントローラー

angular.module('myApp')
  .controller('PageCtrl', function ($scope) {

        $scope.pageContent = '';

        $scope.$on( "receivedPageContent", function(event, args) {
            console.log( 'new page content received after DB call' );
            $scope.pageContent = args.htmlStrFromDB;
        });

});

それはうまくいきます。DB からのページの HTML がブラウザーで適切にレンダリングされていることがわかります。ユーザーが次のページをめくると、次のページのコンテンツが表示されます。ここまでは順調ですね。

問題

ここでの問題は、ページのコンテンツ内にインタラクティブなコンテンツを入れたいということです。たとえば、HTML にサムネイル画像が含まれている場合があります。ユーザーがクリックすると、Angular はポップアップ モーダル ウィンドウを表示するなど、素晴らしい処理を実行する必要があります。データベースの HTML 文字列に Angular メソッド呼び出し (ng-click) を配置しましたが、もちろん、何らかの方法で HTML 文字列を解析し、認識してコンパイルしない限り、Angular はメソッド呼び出しまたはディレクティブを認識しません。

私たちのDBでは

ページ 1 のコンテンツ:

<p>Here's a cool pic of a lion. <img src="lion.png" ng-click="doSomethingAwesone('lion', 'showImage')" > Click on him to see a large image.</p>

ページ 2 のコンテンツ:

<p>Here's a snake. <img src="snake.png" ng-click="doSomethingAwesone('snake', 'playSound')" >Click to make him hiss.</p>

Page コントローラーに戻り、対応する $scope 関数を追加します。

ページコントローラー

$scope.doSomethingAwesome = function( id, action ) {
    console.log( "Going to do " + action + " with "+ id );
}

DB の HTML 文字列内から「doSomethingAwesome」メソッドを呼び出す方法がわかりません。Angular が何らかの方法で HTML 文字列を解析する必要があることは理解していますが、どのように? $compile サービスに関する漠然としたつぶやきを読み、いくつかの例をコピーして貼り付けましたが、何も機能しません。また、ほとんどの例は、ディレクティブのリンク フェーズ中にのみ動的コンテンツが設定されることを示しています。アプリの存続期間中、Page を存続させたいと考えています。ユーザーがページをめくるたびに、常に新しいコンテンツを受信、コンパイル、表示します。

抽象的な意味で言えば、Angular アプリ内で Angular のチャンクを動的にネストしようとしており、それらをスワップインおよびスワップアウトできる必要があると言えます。

私はさまざまな Angular ドキュメントを何度も読み、あらゆる種類のブログ投稿や、人のコードをいじった JS を読みました。私が Angular を完全に誤解しているのか、それとも単純なものを見落としているだけなのか、それとも遅いのかわかりません。いずれにせよ、私はいくつかのアドバイスを使用できます。

4

5 に答える 5

3

使用できます

ng-bind-html https://docs.angularjs.org/api/ng/service/$sce

html を動的にバインドするディレクティブ。ただし、$sce サービス経由でデータを取得する必要があります。

http://plnkr.co/edit/k4s3Bxでライブデモをご覧ください。

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$sce) {
    $scope.getHtml=function(){
   return $sce.trustAsHtml("<b>Hi Rupesh hi <u>dfdfdfdf</u>!</b>sdafsdfsdf<button>dfdfasdf</button>");
   }
});

  <body ng-controller="MainCtrl">
<span ng-bind-html="getHtml()"></span>
  </body>
于 2015-09-14T17:59:15.997 に答える