Question

我有以下模板，它有4个模态（只是id的差异）：

<div id="modal_1">
    <div class="modal-header">
          <h3>I'm a modal 1!</h3>
    </div>
    <div class="modal-body">
        <ul>
           <li ng-repeat="item in items">
                <a ng-click="selected.item = item">{{ item }}</a>
           </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</div>

我的app.js看起来像：

angular.module('app', ['ui.bootstrap', 'ngCookies']);
var ModalDemoCtrl = function ($scope, $cookieStore, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function () {
     if(!$cookieStore.get('abc')){
    var modalInstance = $modal.open({
      templateUrl: 'modalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
  }
};

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

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

`

我的要求：

我想显示4个模态（当用户点击“确定”时一个接一个），如果某个特定的cookie不可用且用户没有“取消”任何其他先前的模态。

但我无法将模态链接起来。

如何链接模态以使前一个模态打开另一个模态直到不满足条件？

Answer 1

您可以使用实用程序功能来减少输入：

showModal('template1.html')
   .then(function(selectedItemFromTemplate1){
      return showModal('template2.html');
   })
   .then(function(selectedItemFromTemplate2){
      return showModal('template3.html');
   })
   .then(function(selectedItemFromTemplate3){
      return showModal('template4.html');
   })
   .catch(function(reason){
      console.log('did not go through all steps because ' + reason);
   })
   .then(function(selectedItemFromTemplate4){
      console.log('finished');
   });

然后像：

一样使用它

recommendation

角度链式模态

1 个答案: