角模态调用Open函数从一个控制器到另一个 [英] Angular Calling Modal Open function from one controller to another

问题描述

我有我的头一个模式窗口，在我的头Click事件链接，打开和关闭模态窗口...这工作正常。即。

 ＆LT; D​​IV CLASS =头NG控制器=headerCtrl＆GT;
...
          ＆LT;立GT;＆LT; A HREF NG点击=open（）的＆GT;报告问题＆LT; / A＆GT;＆LT; /李＆GT;
...
＆LT; / DIV＆GT;
 

然后我控制器

  .controller（'headerCtrl'，['$的位置，$范围，$日志'，'$模式'，函数（$位置，范围$，$日志，$模态）{
    使用严格的;
    （函数（）{//初始化
      $ scope.open =功能（大小）{
        VAR modalInstance = $ modal.open（{
          templateUrl：意见/帮助/ supportModalContent.html'，
          控制器：'supportInstanceCtrl
        }）;
      };
    }）（）;
  }]）  .controller（'supportInstanceCtrl'，['$的位置，$范围，$日志，$ modalInstance'，'$州'，函数（$位置，范围$，$日志$ modalInstance，$状态） {
    使用严格的;
    （函数（）{//初始化
      $ scope.ok =功能（）{
        $ modalInstance.close（$ scope.selected.item）;
      };
      $ scope.isCollapsed = FALSE;
      $ scope.message_sent = FALSE;
    }）（）;    $ scope.cancel =功能（）{
      $ modalInstance.dismiss（'取消'）;
    };    $ scope.faq =功能（）{
      $ modalInstance.close（'取消'）;
      $ state.go（'常见问题解答'）;
    };    $ scope.help =功能（）{
      $ modalInstance.close（'取消'）;
      $ state.go（帮助）;
    };    $ scope.send =功能（）{
      $ scope.isCollapsed =真;
      $ scope.message_sent = TRUE;
    };
  }]）
 

现在的问题是在我的主要内容观点之一，我现在也有一个链接，低于该在这里说一些点击支持。我想再次打开相同的模态窗口。所以，我没有这个

  .controller（'noResultCtrl'，['$的位置，$范围，$日志'，'搜索'，'$州'，'$模式，功能（$位置，范围$，$日志，搜索，$状态，$模态）{
    使用严格的;
    $ scope.open =功能（大小）{
      VAR modalInstance = $ modal.open（{
        templateUrl：意见/帮助/ supportModalContent.html'，
        控制器：'supportInstanceCtrl
      }）;
    };
  }]）
 

和它的工作原理，但有相当不必把这个相同的逻辑在每个控制器我想打电话给同一个模态窗口在头一个更好的办法？

解决方案

  app.service（'modalProvider'，['$模式'，函数（$模态）{this.openPopupModal =功能（）{
VAR modalInstance = $ modal.open（{
          templateUrl：意见/帮助/ supportModalContent.html'，
          控制器：'supportInstanceCtrl
        }）;
}
 

在控制器

包括此服务，并调用openPopupModal method.For例如：

  .controller（'noResultCtrl'，['$的位置，$范围，$日志'，'搜索'，'$状态'，'modalProvider'，函数（ $位置，范围$，$日志，搜索，$状态，modalProvider）{
    使用严格的;
modalProvider.openPopupModal（）;
 

I have a Modal window in my header, with a Click event link in my header to open and close the Modal Window...and this works fine. I.e.

<div class="header" ng-controller="headerCtrl">
...
          <li><a href ng-click="open()">Report an Issue</a></li>
...
</div>

and then my controllers

 .controller('headerCtrl', ['$location', '$scope', '$log', '$modal', function ($location, $scope, $log, $modal) {
    'use strict';
    (function () {// init
      $scope.open = function (size) {
        var modalInstance = $modal.open({
          templateUrl: 'views/help/supportModalContent.html',
          controller: 'supportInstanceCtrl'
        });
      };
    })();
  }])

  .controller('supportInstanceCtrl', ['$location', '$scope', '$log', '$modalInstance','$state', function ($location, $scope, $log, $modalInstance,$state) {
    'use strict';
    (function () {// init
      $scope.ok = function () {
        $modalInstance.close($scope.selected.item);
      };
      $scope.isCollapsed = false;
      $scope.message_sent = false;
    })();

    $scope.cancel = function () {
      $modalInstance.dismiss('cancel');
    };

    $scope.faq = function () {
      $modalInstance.close('cancel');
      $state.go('faq');
    };

    $scope.help = function () {
      $modalInstance.close('cancel');
      $state.go('help');
    };

    $scope.send = function () {
      $scope.isCollapsed = true;
      $scope.message_sent = true;
    };
  }])

The problem is now in one of my main content view, I now also have a link below which says something click here for support. And I want to open the same modal window again. So I did this

  .controller('noResultCtrl', ['$location','$scope','$log','search','$state','$modal',function ($location,$scope,$log,search,$state,$modal) {
    'use strict';
    $scope.open = function (size) {
      var modalInstance = $modal.open({
        templateUrl: 'views/help/supportModalContent.html',
        controller: 'supportInstanceCtrl'
      });
    };
  }])

And it works but is there a better way rather having to put this same logic in every controllers I want to call the same Modal Window in the header ?

解决方案

app.service('modalProvider',['$modal', function ($modal){

this.openPopupModal= function() {
var modalInstance = $modal.open({
          templateUrl: 'views/help/supportModalContent.html',
          controller: 'supportInstanceCtrl'
        });
}

Include this service in your controllers, and call openPopupModal method.For example:

.controller('noResultCtrl', ['$location','$scope','$log','search','$state','modalProvider',function ($location,$scope,$log,search,$state,modalProvider) {
    'use strict';
modalProvider.openPopupModal();

这篇关于角模态调用Open函数从一个控制器到另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！