Angular modal: динамическое изменение модального содержимого

Я попробовал изменить свое модальное содержимое, если добавлю параметр типа к событию нажатия кнопки.

    <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>

Итак, если я выбрал модальный тип 1 или модальный тип 2, содержимое соответственно не изменится, модальное содержимое изменится только на тип 2. Я делаю это так в своем сценарии:

  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

Любая идея, как это можно исправить? :)


angularjs angular-ui angular-ui-modal
person kipris    schedule 18.04.2016    source источник
comment
Внутри, если условие, используйте == для сравнения. if (type == 'type1')   -  person ddepablo    schedule 18.04.2016
comment
И модальное содержимое становится пустым.   -  person kipris    schedule 18.04.2016

Ответы (2)


arrow_upward
2
arrow_downward

Есть две ошибки.

1. Вы отправляете весь массив типов в качестве параметра, а не только выбранный тип.

   resolve: {
        type: function() {
          return type;
        }
      }
  1. Вы сравниваете строки типа с = вместо ==

Если вы измените эти две вещи, то это сработает.

person Simon Schüpbach    schedule 18.04.2016

arrow_upward
1
arrow_downward

Измените свой контроллер на этот

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;
      }

    });
person Mohsin Muzawar    schedule 18.04.2016