Angular 模态：动态改变模态内容

Question

如果我将类型参数添加到按钮单击事件，我尝试更改模式内容。

    <button type="button" class="btn btn-default" ng-click="open('lg', 'type1')">Large modal</button>
    <button type="button" class="btn btn-default" ng-click="open('sm', 'type2')">Small modal</button>

因此，如果我选择 type1 模态或 type2 模态，内容不会相应更改，模态内容只会更改为 type2。我在我的脚本中这样做：

  var titleType1 = "Type 1 Title";
  var titleType2 = "Type 2 Title";
  var contentType1 = "Type 1 Content";
  var contentType2 = "Type 2 Content";

  if (type = 'type1') {  
  $scope.modalTitle = titleType1;
  $scope.modalContent = contentType1;
  }
  if (type = 'type2') {
    $scope.modalTitle = titleType2;
    $scope.modalContent = contentType2;
  }

http://plnkr.co/edit/9VWvsPw4PzflKZDII5H0?p=preview

知道如何修复它吗？ :)

Answer 1

有两个错误。

1。您将整个类型数组作为参数发送，而不仅仅是选择的类型。

   resolve: {
        type: function() {
          return type;
        }
      }

您将类型字符串与 = 而不是 ==

如果你改变这两件事，那么它就会起作用。

Answer 2

将您的控制器更改为此

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

      $scope.type = ['type1', 'type2'];

      $scope.animationsEnabled = true;

      $scope.open = function (size, type) {
        $scope.temp = type;
        var modalInstance = $uibModal.open({
          animation: $scope.animationsEnabled,
          template: "<div ng-include src=\"'myModalContent.html'\"></div>",
          controller: 'ModalInstanceCtrl',
          size: size,
          resolve: {
            type: function() {
              return $scope.temp;
            }
          }
        });

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

      $scope.toggleAnimation = function () {
        $scope.animationsEnabled = !$scope.animationsEnabled;
      };

    });

    // Please note that $uibModalInstance represents a modal window (instance) dependency.
    // It is not the same as the $uibModal service used above.

    angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, type) {
      $scope.type = type;
    alert(type);
      $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
      };

      var titleType1 = "Type 1 Title";
      var titleType2 = "Type 2 Title";

      var contentType1 = "Type 1 Content";
      var contentType2 = "Type 2 Content";

      if (type == 'type1') {
        $scope.modalTitle = titleType1;
        $scope.modalContent = contentType1;
      }
      if (type == 'type2') {
        $scope.modalTitle = titleType2;
        $scope.modalContent = contentType2;
      }

    });

Angular 模态：动态改变模态内容

Angular modal: dynamically change modal content

angularjs

angular-ui

angular-ui-modal