CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
dominic
dominic

Reputation: 405

Open Modal with angular js and bootstrap ui

I'm trying to learn AngularJs and I want simply open a modal panel and show a picture in it.

So my gallery.html looks like: 

 <div class="row">
  <div ng-repeat="image in images">
    <div class="clearfix" ng-if="$index % 4 == 0"></div>
    <div class="col-md-3 center-block">
      <button class="thumbnail" ng-click="openPopup(image.path)">
        <figure>
          <img class="thumbnailImage" src="/uploads/img/thumb/{{image.path}}">
          <figcaption class="text-center text-uppercase text-muted thumbnailTitle "><strong>{{image.title}}</strong>
          </figcaption>
        </figure>
      </button>
    </div>
  </div>
</div>

And my Gallery controller looks like: 

(function () {

  class GalleryCtrl {


    constructor($http, $scope, socket) {
      this.$http = $http;

      $http.get('/api/pictures').then(response => {
        $scope.images = response.data;
        socket.syncUpdates('image', this.images);
      });

      $scope.$on('$destroy', function () {
        socket.unsyncUpdates('image');
      });

      $scope.openPopup = function (path) {
        var modalInstance = $uibModal.open({
          animation: true,
          templateUrl: 'galleryPopup.html',
          controller: 'GalleryCtrl',
          size: size,
          resolve: {
            imgPath: function () {
              return path;
            }
          }
        });
      }
    }

I created a new html file galleryPopup.html in the same folder.

But if I click on one of my thumbnails the popup doesn't show up. I have read the ui-bootstrap doc but I didn't get it.

Later I want to use the carousel in the popup. Maybe a dialog is the better way ?

Thanks for your help.

Dominic

Upvotes: 0

Views: 640

Answers (1)

Alok
Alok

Reputation: 1310

First things first, you are not passing the 

$uibModal

to your controller. That should have shown you an error !

Are you passing in 'ui.bootstrap' to your app ??

If you thinks all of then are there, I will suggest have a simple popup working first and then take it from there. Have a look at the plunkr

Upvotes: 1

Related Questions