从具有隔离范围的指令调用控制器函数,而不创建标记属性

时间:2014-07-24 09:05:09

标签: angularjs

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

0 个答案:

没有答案