Question

我想知道是否有可能将模态调用代码移到工作文档之外，只是从一些常见工厂调用它们。

目前我用以下方式调用对话框：

vm.showObjectInfo = function () {
    $rootScope.mObjectInfoInstance = $uibModal.open({
        animation: true,
        templateUrl: 'frmObjectInfo.html',
        backdrop: 'static',
        keyboard: false
    });

    $rootScope.mObjectInfoInstance.result.then(function () {
        // Refresh something in this document
    });
};

这种方法的缺点是我需要在我想调用对话框的每个文件中编写这段代码，这意味着我创建了更多相同的实例。

我想也许我可以将$rootScope.mObjectInfoInstance代码移到某个普通工厂并使用如下：

vm.showObjectInfo = function () {
    myFactory.objDialog.result.then(function () {
        // Refresh something in this document
    });
};

我试图这样做，但每当我最终得到 undefined objDialog时，如果真相被告知，我认为无论如何我都不会这样做。

是否有任何建议或建议“使用常见对话框的最佳做法”？

谢谢

Answer 1

你可以将模态逻辑打开到工厂中：

Enter your message to code: HI
What is the key value?2



7
8
10
>>>

Answer 2

我解决了这个问题，我使用全局JS变量来保存模态实例，它使代码非常干净和轻巧：

以下是demo plnkr

以下是代码：

var myApp = angular.module('Shared', ['ui.bootstrap']);    

// Create simple global var for holding modal instance outside of angular!
var GmObjectInfoInstance;

myApp.factory('sh', function($uibModal){
    // Implement openModal in your shared factory
    function openModal(page){
        return $uibModal.open({
            animation: true,
            templateUrl: page,
            backdrop: 'static',
            keyboard: false
        });       
    }
    // Expose function
    return {
        openModal: openModal
    }
});


myApp.controller('frm', ['sh', function (sh) {
  this.showObjectInfo = function () {

      // Call in any controller or factory or whatever
      GmObjectInfoInstance = sh.openModal("frmObjectInfo.html");
      GmObjectInfoInstance.result.then(function () {
         console.log("blah");
      });

  }

}]);


myApp.controller('modalCtrl', [ function () {
   // To close the dialog from inside, just use
   this.onCancelBtnClick = function(){
      GmObjectInfoInstance.close();
}       
}]);

所以你不需要多次使用$ rootScope和重写代码，我发现这种方法非常有用。

使用Angular-UI的全局模态

2 个答案: