Question

我有一个要求。我正在使用Angularstrap Modal进行模态对话（用户的条款和条件）。

在这个模式上，对话框中有两个按钮＆＃34;同意＆＃34;和＆＃34;不同意＆＃34;。

我有两个链接。在点击每个链接时，会打开不同的视图。两个视图都与不同的控制器相关联。我的要求是，我需要在新用户到来时打开术语对话，并且需要在两个链接的点击事件上打开。目前我必须在每个控制器中编写模态代码。（与打开模态和模态按钮的功能相同）

现在，我想概括一下模态和模态按钮的代码。我想写一次，我想在需要打开（任何）模态时使用该代码

什么是方法或可能？

Answer 1

这是我的对话服务的骨架伪代码：

//modal container is the template with backdrop 
//and other modal elements (title, body, buttons, close button)
loadContainerTemplate() 
//the actual html content for the modal body
.then(loadDialogTemplate)
.then(init);

function init() {
  //append container to body
  //append dialog template to modal body
  //create new scope for the modal
  //set up buttons, title, width, etc.
  //listen for ESC keypress
  //initialize modal controller if needed
  //prepare close function (destroy scope, remove dom, execute close callbacks, etc)
  //compile modal html against scope
}

我的服务会接受诸如模态模板的网址，标题，宽度，按钮及其回调，父作用域等参数。在您的控制器中，您只需调用如下对话框：

function($scope, Dialog) {
   Dialog({scope: $scope, templateUrl: 'path/to/modal/body', buttons: {
     'agree': agreeCallback,
     'disagree': disagreeCallback
   }, title: 'Modal title'});
}

或者你可以更进一步创建TermsModalService，它可以抽象模板，按钮，回调，标题等细节，并使用底层的Modal服务来显示实际的对话框。条款模式可以在所有带单行的控制器之间轻松使用：TermsDialogService.show();

在两个Angular js控制器之间共享功能

1 个答案: