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

使用角度js和bootstrap ui打开模态

1 个答案: