Angularjs 从具有独立作用域的指令调用控制器函数而不创建标记属性

与此相关，但我不想在标记中创建一个属性来调用函数

我有一个棘手的问题，涉及一个控制器、一个具有隔离作用域的指令和一个正在消失的剑道ui模式对话框。罪魁祸首当然是IE

当我的应用加载时，它有一个菜单，菜单上有一个名为“打开对话框”的项目。单击它时，它将调用控制器上名为callModal（）的函数：

当我缩小浏览器（仅限Chrome浏览器）时，模式对话框将从视图中消失。我甚至在IE的DOM上都找不到它，我也不知道为什么

我建议的解决方案是挂接浏览器的resize事件，并通过调用控制器函数$scope.callModal（）重新创建对话框

要做到这一点，我必须使用scope.$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!
              }
           };

angular.module（'myModule'）。指令（'modalDialog'，['$window'，函数（myWindow）{
返回{
限制：“ACE”，
替换：正确，
是的，
范围：{
//这里有各种属性
},
模板：“”，
编译：函数（远程通讯、tAttrs、转置）{
返回函数（范围、元素、属性）{
var viewWindow=angular.element（myWindow）；//将窗口强制转换为angular元素
viewWindow.bind（'resize'，autoResizeHandler）；//bind resize
var resizeHandler=function（）{//resize处理程序函数
/*
尝试查找对话框。如果找不到，请调用
要重新创建的控制器函数
*/
var kendoModal=jQuery（'div[kendo window]”）；
if（kendoModal.length==0）{
scope.$parent.$parent.callModal（）；//这是可行的，但很难看！
}
};

您的选项有限。如果您不想要属性，也不想使用

$parent

（好选择），你可以做一些pubsub。@JesusRodriguez。谢谢你的回复。那么使用scope.$parent.$parent是否可以？有人告诉我这不好，因为父项可能会更改…？哦，我写错了。好的选择是因为我同意你不使用它。$parent总是可以更改的，这很糟糕。@JesusRodriguez。好的，谢谢你的澄清。

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!
              }
           };