Angular UI Bootstrap Modal Popup

Question

I am learning angular ui bootstrap modal form, and found some example in plunker.

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

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

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.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');
  };
};

This is plunker link http://plnkr.co/edit/ggtsdMSyYIRcXHe9zkw1?p=preview

Question is :

What is the use of this line

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

Why there is an array there?

how to make it more simpler?

Ohmen Ohmen · Accepted Answer · 2016-02-05T12:50:37

These items are passed to the ModalInstanceCtrl with the resolve key during

$modal.open({
  templateUrl: 'myModalContent.html',
   controller: ModalInstanceCtrl,
   resolve: {
    items: function () {
      return $scope.items;
     }
  }
});

These items are injected into the items parameter of the ModalInstanceCtrl.

Inside the the ModalInstanceCtrl these items are used to generate the links shown in the modal window.

Play around a little with the values and observe the results.

Angular UI Bootstrap Modal Popup

1 Answers