无法将范围传递给角度对话框答案

【问题标题】：Not able to pass scope to dialog in angular无法将范围传递给角度对话框
【发布时间】：2015-12-18 05:42:19
【问题描述】：

我正在使用 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
      });
    };

有人知道为什么吗？

我还没弄明白。

【问题讨论】：

好吧，如果您将对话框的 html 作为 ImageController 的子项包含在内，您将能够访问控制器的范围。您可以使用的另一种方法是使用 $broadcast/$emit 向下和向上推送数据。
当您说“如果您将对话框的 html 包含为 ImageController 的子项”时，您的意思是我的示例 1？因为那行得通……
我通过阅读以下内容创建了第二个示例：github.com/likeastore/ngDialog#scope-object 所以我不确定我错过了什么......

标签： angularjs ng-dialog

【解决方案1】：

将您的打开方法更改为关注..

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

这应该可以工作...

【讨论】：

【解决方案2】：

最适合我的方法是没有范围。只需使用数据属性：

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

【讨论】：