$ templateCache fancybox，如何將變量綁定到控制器作用域

Question

我一直在努力嘗試讓fancybox顯示來自$templateCache的html模板。這一切都工作正常，除了惱人的事實，數據綁定不起作用，我不知道如何解決它。

<div ng-controller="MyCtrl"> 
    Hello, {{ templateVariable }}! 

    <script type="text/ng-template" id="testTemplate.html"> 
     <h1>{{ templateVariable }}</h1> 
     <p>Bla bla bla</p> 
    </script> 

    <br /><br /> 
    <a href="#" show-template>Show template</a> 
</div> 

---

var myApp = angular.module('myApp',[]); 

myApp.directive('showTemplate', function($templateCache, $compile, $parse) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs, ctrl) { 
      element.bind('click', function() { 
       var template = $templateCache.get('testTemplate.html'); 
       var compiled = $compile(template)(scope); 
       $.fancybox.open(template); 
      }); 
     } 
    }; 
}); 

myApp.controller('MyCtrl', function($scope) { 
    $scope.templateVariable = 'My template variable'; 
}); 

的jsfiddle： http://jsfiddle.net/oligustafsson/p4f7mh19/

任何人有任何見解，如何完成這一壯舉？

Answer 1

要回答我的問題，這是我想出了：

<div ng-controller="MyCtrl"> 
    Hello, {{ templateVariable }}! 

    <script type="text/ng-template" id="testTemplate.html"> 
     <div> 
      <h1>{{ templateVariable }}</h1> 
      <p>Bla bla bla</p> 
      <div>Mooo</div> 
     </div> 
    </script> 

    <br /><br /> 
    <a href="#" show-template="">Show template</a> 
</div> 

我包裹在一個div模板HTML。

var myApp = angular.module('myApp',[]); 

myApp.directive('showTemplate', function($templateCache, $compile, $timeout) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs, ctrl) { 
      element.bind('click', function() { 
       $timeout(function(){ 
        var template = $templateCache.get('testTemplate.html'); 
        var linkFn = $compile(template); 
        var linkedContent = linkFn(scope); 
        $.fancybox.open(linkedContent); 
       }, 0) 
      }); 
     } 
    }; 
}); 

myApp.controller('MyCtrl', function($scope) { 
    $scope.templateVariable = 'My template variable'; 
}); 

查找其他建議，如使用$超時和$編譯，這似乎工作得很好。

的jsfiddle：http://jsfiddle.net/oligustafsson/vpbutty0/

感謝名單！