Question

我创建了一个简单的测试页面以显示问题。

<html>
<head>
<link href="http://www.cloud-eight.com/github/litebox/assets/css/litebox.css" type="text/css" rel="stylesheet">
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="mainCtrl">
        <test></test>
        <div vfilter>This works</div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://www.cloud-eight.com/github/litebox/assets/js/litebox.min.js"></script>
<script src="http://www.cloud-eight.com/github/litebox/assets/js/images-loaded.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.directive('test', function () {
    return {
        template: '<div href="#searchPopup" target="_self" class="popup">Click Me...<div style="display: none;"><div id="searchPopup">Hello World...<div vfilter>This doesn\'t</div></div></div></div>',
        replace: true,
        scope: false,
        link: function (scope, element, attrs) {
            element.liteBox({
                revealSpeed: 400,
                overlayClose: true,
                escKey: true,
                navKey: true,
                callbackInit: function () { },
                callbackBeforeOpen: function () { },
                callbackAfterOpen: function () { },
                callbackBeforeClose: function () { },
                callbackAfterClose: function () { },
                callbackError: function () { },
                callbackPrev: function () { },
                callbackNext: function () { },
                errorMessage: 'Error loading content.'
            });
        }
    };
});
myApp.directive('vfilter', [ function () {
    return {
        restrict: 'A',
        scope: false,
        link: function (scope, element, attrs) {
            console.log('linked');

            element.bind('click', function () {
                console.log('clicked');
            });
        }
    }
}]);
myApp.controller('mainCtrl', [function ($scope) {
    console.log('controller loaded');
}]);


</script>
</body>
</html>

我也有fiddle。

我的样本中有一个指令vilter。它确实会在将登录控制台的click事件上添加绑定。出于测试原因，我将其记录为其链接工作。

我还有另一个弹出div的指令。我将vfilter指令放在主体和popup指令中。

当两个vfilter都记录其链接运行时，弹出窗口内的一个记录无法记录click事件。

Answer 1

我设法通过查看post

来解决这个问题

在我的调用litebox的指令中，我在callbackAfterOpen：

中添加了此代码

$compile($('.litebox-overlay').contents())(scope);

这使它成功。

指令中的指令无法绑定事件

1 个答案: