javascript - 在AngularJS中使用外部库(灯箱)

我正在使用AngularJS，并且想添加一个用于显示图像的灯箱。我的灯箱代码如下所示（我正在使用shadowbox）：

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

但是当我想将影子框与AngularJS一起使用时：

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

阴影框将被忽略，其工作方式类似于普通链接。
使这项工作最好的方法是什么？

我可能必须编写一条指令，但是我对它不熟悉。

最佳答案

我认为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>

关于javascript - 在AngularJS中使用外部库(灯箱)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21335230/