与此question相关但我不想在标记中创建一个属性来调用该函数。
我有一个涉及控制器的粘性问题,一个带有隔离范围的指令和一个消失的剑道ui模态对话框。罪魁祸首当然是IE。
当我的应用加载时,它有一个菜单,其中包含一个名为“打开对话框”的项目。单击它时,它会调用名为callModal()的控制器上的函数:
// javascript object used to build menu. Used by another directive to build the app's menu & is shown here just for illustration
"quickLinks": [ {"label": "Open Dialog", "action": "callModal()", "actionController": "ModalController"} ]
// the controller
angular.module('myModule').controller('ModalController', ['$scope','modalService', function ($scope, modalService) {
$scope.callModal = function () {
var modal = {
scope: $scope,
title: 'Add a user',
templateUrl: 'modal.html'
};
modalService.openDialog(modal, function (result) {
//service code to open a kendo ui dialog, not relevant to this question
});
};
}]);
当我缩小浏览器时(仅限IE浏览器,Chrome很好),模式对话框会从视图中消失。我甚至无法在IE中的DOM上找到它,我不知道为什么。
我提出的解决方案是挂钩浏览器的resize事件,并通过调用控制器函数$ scope.callModal()重新创建对话框。
要做到这一点,我必须使用范围。$ parent。$ parent.callModal(),我被告知这是错误的。
有人能建议更好的方法吗?
这是我的指令代码:
angular.module('myModule').directive('modalDialog', ['$window', function (myWindow) {
return {
restrict: 'ACE',
replace: true,
transclude: true,
scope: {
// various attributes here
},
template: '<div kendo-window></div>',
compile: function (tElement, tAttrs, transclude) {
return function (scope, element, attrs) {
var viewWindow = angular.element(myWindow); // cast window to angular element
viewWindow.bind('resize', autoResizeHandler); // bind resize
var resizeHandler = function() { // the resize handler function
/*
Try find the dialog. If not found, then call
controller function to recreate
*/
var kendoModal = jQuery('div[kendo-window]');
if (kendoModal.length === 0) {
scope.$parent.$parent.callModal(); // this works but it's ugly!
}
};