Question

我有以下Html / Angular来显示图像列表和投票选项。

<div data-ng-app="Application" data-ng-controller="ImageController">
  <div data-ng-repeat='image in model.images'>
    <img src="{{image.Url}}" alt=""/>
    <div class="vote">
      <a href="" data-ng-click="vote(image)"><i class="icon-vote"></i></a>
      <span>{{image.Votes}}</span>
    </div>
  </div>
</div>

当用户点击图像时，我希望它在对话框中打开。

我需要显示图像和投票功能，所以基于：

{{image.Url}}, data-ng-click="vote(image)" and {{image.Votes}}

我还需要显示图标以分享基于{{image.Url}}创建链接的图像（脸书，推特，...）。

有人可以告诉我最好的方法吗？也许使用模块？

我不确定如何将{{image.Url}}，...中的数据传送到带有特定HTML标记的对话框。

Answer 1

最佳出发点是看角度模态https://github.com/btford/angular-modal

看看addthis的共享功能，这将非常简单。

====

这是一个使用angular-modal

的工作plunkr（除了模态样式不适用）

http://plnkr.co/edit/KfkVbbxfApF8xrDkeLmb?p=preview

以下是相关代码

  $scope.popModalForImage = function(index) {
    if (modal) {
      modal.deactivate();
    }
    modal = btfModal({
      controller: function() {
        this.image = $scope.images[index];
        this.vote = function() {
          $scope.images[index].votes += 1;
          modal.deactivate();
        }
        this.closeMe = function() {
          modal.deactivate();
        }
      },
      controllerAs: 'ctrl',
      template: '<div class="btf-modal">' +
                '   <button ng-click="ctrl.closeMe()">close me</button>' +
                '   <button ng-click="ctrl.vote()">vote for {{ctrl.image.name}}</button> <br />' +
                '   <img src="{{ctrl.image.url}}">' +
                '   <p>Total votes: {{ctrl.image.votes}}</p>' +
                '</div>'
    });
    modal.activate();

模板：

<p ng-repeat="image in images">
  <a href="#" ng-click="popModalForImage($index)">{{image.name}}</a>
  (votes: {{image.votes}})
</p>

弹出一个包含列表信息的对话框

1 个答案: