Question

我正在使用AngularJS，我想添加一个灯箱来显示图像。我的灯箱代码就像这样（我使用shadowbox）：

<a href="myimage.jpg" rel="shadowbox">image name</a>

但是当我想像AngularJS一样使用shadowbox时：

<a ng-repeat="pic in pics" href="{{pic}}" rel="shadowbox">image name</a>

阴影框将被忽略，它的工作方式与普通链接相同。使这项工作的最佳方法是什么？

我可能要写一个指令，但我不熟悉它......

Answer 1

我认为shadowbox只处理DOM一次，并且不会注册AngularJS的DOM修改。

通常的方法是编写一个实例化Shadowbox的包装器指令。我建议您直接调用Shadowbox，而不是使用rel="shadowbox"属性的自动设置。基本上有两个步骤：

为Shadowbox设置directive
在指令范围内注册一个函数，单击该链接时将调用该函数。请阅读Shadowbox documentation和API documentation了解如何操作。

指令原型：

angular.module('yourModuleName') // you can use your own name here
.directive('shadowbox', function() {
  return {
    // here you can style the link/thumbnail/etc.
    template: '<a ng-click="openShadowbox()">{{imageName}}</a>',
    scope: {
      imageName: '@name',
      imageUrl: '@url'
    },
    link: function (scope, element, attrs) {

      // the function that is called from the template:
      scope.openShadowbox = function () {

        // see Shadowbox documentation on what to write here.
        // Example from the documentation:

        Shadowbox.open({
          content:    '<div id="welcome-msg">Welcome to my website!</div>',
          player:     "html",
          title:      "Welcome",
          height:     350,
          width:      350
        });
      };

    }
  };
});

用法：

<a shadowbox name="image name" url="image url"></a>

Answer 2

以下是两种情景：

在第一个中你首先创建html，然后你进行插件调用，因此它工作正常。

但在第二种情况下，您在运行时创建元素，但您的插件调用已经触发。

因此，一旦创建了所有元素，就需要进行插件调用。

希望这可能是您案件的解决方案。：）

使用AngularJS的外部库（灯箱）

2 个答案: