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>

我将模板html包装在div中。

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';
});

找到一些其他的建议，比如使用$ timeout和$ compile，这似乎工作正常。

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

感谢名单！

$ templateCache到fancybox，如何将变量绑定到控制器范围

1 个答案: