angularjs - モーダルでページ要素を展開する

Question

いくつかのデータの Google チャートを表示するウィジェットがページにあり、チャート データをフィルタリングするためのいくつかのフィルターと、それを印刷するための印刷アイコンがあります。

この同じウィジェットを開くボタンを追加して、チャート、フィルター、および印刷機能を大きな画面ビューのモーダルで動作させたいと考えています。ウィジェットがページ内で小さいためです。

ボタンを追加しようとしましたが、リンク機能にこのボタンの機能を追加しelement.html()てモーダルで開くと、html は機能しましたが、問題はフィルターと印刷が機能しないことです。

何が問題なのelement.html()ですか? $compile の使用にうんざりしましたが、多くのエラーが発生しました。何を使えますか？

app.directive("widget", function ($rootScope) {
        return {
                restrict: "EA",
                scope: { 
                        title: '=',
                        options: '='
                },
                transclude: true,
                templateUrl: "widget.html",
                link: function(scope, element, attrs, ctrl, transclude) {
                    scope.print = function() {....}
                    scope.filterChart = function() {....}

                    scope.expand = function() {
                      $rootScope.openModal("expand Modal", element.html(), {});      
                    } 
                }
        }

$rootScope.openModal は、$modal サービスを使用する単なるラッパー サービスであり、タイトルと本文を受け取ることに注意してください。