Question

我使用Angular UI的模态模块来创建对话框。我需要创建几个非常相似的盒子。它们看起来大致如下：

Question?
yes (yellow button), no, cancel

Question?
yes (yellow button), no

cancel
    option 1
    option 2 (yellow button)
    option 3

我是否有一种聪明的方法可以避免为每个单独的对话框创建HTML模板？在其他语言中，我会做类似＆＃34; result = showDialog（＆＃34; Question？＆＃34;，[＆＃34; ok＆＃34;，＆＃34; cancel＆＃34;]）＆＃34 ;。我想避免把东西放在我的控制器中，但实际上并不应该存在（例如演示文稿）。

顺便说一句，我不能决定UI的外观，所以它们必须看起来像这样...

Answer 1

在单个html模板中，创建多个按钮，并结合自定义选项，使用ng-show显示或隐藏按钮。示例：ng-show =＆＃34; showButton3＆＃34;。

Answer 2

您可以创建单个模板和单个控制器来处理所有这些场景，只需通过控制器应用不同的选项：

var ModalInstanceCtrl = function ($scope, $modalInstance, options) {    
  $scope.options = options;

  $scope.yes = function () {
    $modalInstance.close('yes');
  };

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

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

然后将对该模态的调用包装在可以在任何需要的地方调用的函数中：

  $scope.showDialog = function (question, title, showCancel) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        options: function () {
          return {
            question: question,
            title: title,
            showCancel: showCancel
          };
        }
      }
    });

    modalInstance.result.then(function (action) {
      $scope.selected = action;
    }, function (action) {
      $scope.selected = action;
    });
};

然后是一个模态模板，根据传入的选项显示您需要的任何内容。这是一个展示这个想法的傻瓜：http://plnkr.co/edit/y3c5bz5AXjrNo1XFzMBP

当然，如果您要在整个应用程序中使用这样的东西，将它抽象为服务是明智的，而不是将它作为附加到$scope的函数。

创建几个类似的Angular对话框，没有大量的代码和模板

2 个答案: