6

Angular を使用して画像の一覧を表示しています。

画像をクリックすると、画像と詳細情報を含むダイアログが表示されます。

したがって、モーダルを開くときは、スコープ、または少なくとも画像を渡す必要があります。

注:ポップアップにngDialogを使用しています。

  application.controller('ImageController', function ImageController($scope, ImageService, ngDialog) {

    $scope.model = {
      images: [],
      loading: false
    }

    var load = function () {
      $scope.model.loading = true;
      ImageService.GetList($scope.model.pages.instagram)
        .success(function (data, status, headers, config) {
          $scope.model.images = $scope.model.images.concat(data.Images)
        })
        .error(function (data, status, headers, config) { })
        .finally(function () {
          $scope.model.loading = false
        });;
    }

    $scope.open = function (image) {
      ngDialog.open({
        template: '<p>my template {{image.Key}} </p>',
        plain: true,
        scope: $scope
      });
    };


    load();

  });

  <div data-ng-app="Application" data-ng-controller="ImageController">
    <div data-ng-repeat='image in model.images'>
    <img src="{{image.Url}}" alt="" data-ng-click="open(image)"/>
  </div>

画像が表示され、クリックするとダイアログが開きます...

ただし、どういうわけか、テンプレート内のスコープにアクセスできません。

以下の作品：

    $scope.open = function (image) {
      ngDialog.open({
        template: '<p>my template' + image.Key + '</p>',
        plain: true
      });
    };

しかし、これは機能しません:

    $scope.open = function (image) {
      ngDialog.open({
        template: '<p>my template {{image.Key}} </p>',
        plain: true,
        scope: $scope
      });
    };

誰かが理由を知っていますか？

私はこれを理解することができませんでした。

4

2 に答える 2

10

open メソッドを次のように変更します。

  $scope.open = function (image) {
      var newScope = $scope.$new();
      newScope.image = image;
      ngDialog.open({
        template: '<p>my template {{image.Key}} </p>',
        plain: true,
        scope: newScope
      });
    };

これはうまくいくはずです...

于 2015-01-09T17:14:31.790 に答える
1

私にとって最善の方法は、スコープなしです。データ属性を使用するだけです：

 $scope.open = function (image) {          
                  ngDialog.openConfirm({
                  template: 'views/alertTemplate.html'
                  showClose: false,
                  data: {
                    image: image,
                  }
                });  
            }

そしてあなたのテンプレートファイルで：

<div class="alert-dialog-container">
  <div class="alert-dialog-body">
    <p ng-bind-html="ngDialogData.image"></p>
  </div>
  <div class="alert-dialog-footer">
    <button ng-click="confirm()">OK</button>
  </div>
</div>
于 2015-12-17T21:42:19.607 に答える