使用 jquery colorbox 动态呈现 angularjs 模板答案

【问题标题】：using jquery colorbox to render an angularjs template dynamically使用 jquery colorbox 动态呈现 angularjs 模板
【发布时间】：2014-09-30 02:58:07
【问题描述】：

我正在使用路由来渲染模板的主体，见下文。模板已加载，此时没有问题。

当用户在链接上的渲染模板（/templates/my-details）中单击时，我想触发一个颜色框弹出窗口并使用另一个填充了 my_object 数据的角度模板，该模板在路由中可用。

我编写了一个自定义指令来处理点击时触发的代码，获取模板并编译它。然后将其内容传递给颜色框以使用。

我遇到的问题是compiled_template 没有正确渲染。我会假设传递给 $compile(template)(scope) 的范围将包含对象 my_object 以供模板 /templates/my-buy 使用，但它似乎不是因为编译的模板忽略了任何表达式、指令等。 .那个引用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"
            });

          });
        }
      };
    });

【问题讨论】：

您是否将my_object 定义为某个范围变量，例如在控制器中？
我假设 resolve: 在路由提供程序中填充路由 scrope，因为 /templates/my-details 模板可以访问 my_object。所以我还假设将指令颜色框应用于一个元素，我还假设它与当前路由的范围相同，也可以访问范围。在 chrome 中调试时，我可以在范围内看到 my_object 在那里......正如你所看到的，我做了很多假设；-).. 因此我很困惑。

标签： jquery angularjs colorbox ngroute

【解决方案1】：

你可以直接制作：

$.colorbox({
 innerWidth:350,
 innerHeight:550,
 href: "templates/my-buy"
});

【讨论】：