jquery - jquery colorbox を使用して angularjs テンプレートを動的にレンダリングする

Question

テンプレートの本文をレンダリングするためにルートを使用しています。以下を参照してください。テンプレートが読み込まれ、この時点で問題はありません。

ユーザーがリンクのレンダリングされたテンプレート (/templates/my-details) 内をクリックすると、カラーボックス ポップアップがトリガーされ、ルートで利用可能な my_object データが取り込まれた別の角度テンプレートを使用したいと考えています。

クリックでトリガーされるコードを処理し、テンプレートを取得してコンパイルするカスタム ディレクティブを作成しました。次に、その内容を colorbox に渡して使用します。

私が抱えている問題は、compiled_template が正しくレンダリングされていないことです。$compile(template)(scope) に渡されたスコープには、使用するテンプレート /templates/my-buy のオブジェクト my_object が含まれていると想定していましたが、コンパイルされたテンプレートは式やディレクティブなどを無視するため、そうではないようです。 . my_object を参照します。

これは、ルーティングを行う前に機能し、ng-controller を定義するためのディレクティブ要素を使用して、はるかに単純なページを作成していました。私が渡しているスコープは、私が使用しているルート プロバイダーのスコープではないとしか思えません。"/"。

my_app.config(function($routeProvider) {
        $routeProvider.
          when('/', {
            templateUrl: '/templates/my-details',
            controller: 'MyShowCtrl',
            resolve: {
                my_object: function(myService, settingsService){
                    return dealService.getDeal(settingsService.init().my_guid);
                }
            }   
          }).
          otherwise({
            //redirectTo: '/'
          });
    });

my_app.directive('colorbox', function($compile, $templateCache,$rootScope){
      return {
        link: function(scope, element, attrs){
          element.click('bind', function(){

            // get template from cache process and apply to colorbox
            var template = $templateCache.get('/templates/my-buy');
            var compiled_template = $compile(template)(scope);      

            $.colorbox({
              html: compiled_template,
              width: "600px",
              height: "600px"
            });

          });
        }
      };
    });