1

I've tried this plunker

http://plnkr.co/edit/s902hdUIjKJo0h6u6k0l?p=preview

 angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function  ($scope, $modalInstance, items) {

but it gives an error Error: [$injector:unpr] Unknown provider: itemsProvider <- items

I want to have two buttons with 2 differents modal

2 Answers 2

1

There are lot of syntax mistakes: Updated plunker http://plnkr.co/edit/vgM5PLyVgluOeikGvVSA?p=preview

Changes made in JS:-

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

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

  $scope.open = function (size) {

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

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



angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl2', function ($scope, $modal, $log) {

  $scope.items2 = ['item12', 'item22', 'item32'];

  $scope.open = function (size) {

    var modalInstance2 = $modal.open({
      templateUrl: 'myModalContent2.html',
      controller: 'ModalInstanceCtrl2',
      size: size,
      resolve: {
        items2: function () {
          return $scope.items2;
        }
      }
    });

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

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

angular.module('ui.bootstrap.demo').controller('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');
  };
});
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl2', function ($scope, $modalInstance, items2) {

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

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

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});
Sign up to request clarification or add additional context in comments.

2 Comments

@toffd Hello, the best way to use bootstrap component with angular is angular-ui.github.io/bootstrap you can find all the small components like modal,Carousel ..etc with great explanation ,code and demo. And please accept the answer and up vote if you are satisfied.
its ok ,but if you are satisfied please accept the answer.
1

You can try my Angular Dialog Service, its built on top of ui.bootstrap's modal but offers prefabricated modals for errors, notifications, progression, confirmations and custom dialogs. It allows you to set configuration as well in your application's config function using 'dialogsProvider' so you don't have to setup keyboard and backdrop settings everytime. There's also support for using angular-translate and fontAwesome.

You can find it here: https://github.com/m-e-conroy/angular-dialog-service or on bower.io.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.