使用 angular js 和 bootstrap ui 打开模式

Question

我正在努力学习 AngularJs，我只想打开一个模式面板并在其中显示图片。

所以我的 gallery.html 看起来像：

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

我的画廊控制器看起来像：

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

我在同一文件夹中创建了一个新的 html 文件 galleryPopup.html。

但是，如果我单击其中一个缩略图，则不会显示弹出窗口。我已经阅读了 ui-bootstrap doc 但我没有明白。

稍后我想在弹出窗口中使用轮播。也许对话是更好的方式？

感谢您的帮助。

多米尼克

Answer 1

首先，你没有通过

$uibModal

到你的控制器。那应该告诉你一个错误！

您是否将 'ui.bootstrap' 传递给您的应用程序？？

如果您认为所有这些都在那里，我建议您先使用一个简单的弹出窗口，然后再从那里获取。看看 plunkr

使用 angular js 和 bootstrap ui 打开模式

Open Modal with angular js and bootstrap ui

angularjs

angular-ui-bootstrap