Question

我试图通过一个指令用指令装饰给定列表中的所有锚标签，因此我不必复制/粘贴相同的代码和＆amp ;;结束了。

到目前为止，它的效果很好，除了当我使用动态修饰的链接启动模态时，我得到原始图像代码与实际渲染图像。在我的测试中，我手动将指令放在前几个链接上。让它装饰bootstrap模态属性＆amp;它工作得很好。

这是装饰列表中所有锚点的指令：

angular.module('wmApp.wmAddImageModal', [])

.directive('wmAddImageModal', function() {
  return {
    restrict: 'A',
    link: function ($scope, element, $attrs) {
      var anchors = element.find('a');

      angular.forEach(anchors, function (anchor) {
        var a = angular.element(anchor);
        a.attr('data-wm-image-modal', '');
        a.attr('data-toggle', 'modal');
        a.attr('data-target', '#wm-modal');
      });
    }
  };
});

这是单击锚点时的指令。我也试过了data-ng-src，没有运气：

angular.module('wmApp.wmImageModal', [])

.directive('wmImageModal', function() {
  return {
    restrict: 'A',
    link: function($scope, element, $attrs) {
      element.on('click', function($event) {
        $event.preventDefault();

        var imgUrl = window.location.origin + '/' + $attrs.href,
            content = '<div class="modal-header"><h3 class="modal-title">' + $attrs.title + '</h3></div>' +
                      '<div class="modal-body"><img src="' + imgUrl + '" width="100%"></div>';

        $('#wm-modal .modal-content').html(content); 
      });
    }
  };
});

为了完整起见，我包括了我正在使用的bootstrap模态脚手架。整个模态不是指令元素的子元素，而是列表中的兄弟：

<div class="modal fade" id="wm-modal" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content"></div>
  </div>
</div>

原始锚点列表：

<ul data-wm-add-image-modal>
  <li>
    <h4>
      <a href="path/to/image.png" title="An awesome description">
        2016: Screenshot</a>
    </h4>
    <p>
      An awesome description
    </p>
  </li>
  <li>
    <h4>
      <a href="path/to/image.png" title="An awesome description">
        2016: Screenshot</a>
    </h4>
    <p>
      An awesome description
    </p>
  </li>
  <li>
    <h4>
      <a href="path/to/image.png" title="An awesome description">
        2016: Screenshot</a>
    </h4>
    <p>
      An awesome description
    </p>
  </li>
</ul>

这是wm-add-image-modal装饰每个锚之后的样子：

<ul data-wm-add-image-modal>
  <li>
    <h4>
      <a href="path/to/image.png" title="An awesome description" data-wm-image-modal data-toggle="modal" data-target="#wm-modal">
        2016: Screenshot</a>
    </h4>
    <p>
      An awesome description
    </p>
  </li>
  <li>
    <h4>
      <a href="path/to/image.png" title="An awesome description" data-wm-image-modal data-toggle="modal" data-target="#wm-modal">
        2016: Screenshot</a>
    </h4>
    <p>
      An awesome description
    </p>
  </li>
  <li>
    <h4>
      <a href="path/to/image.png" title="An awesome description" data-wm-image-modal data-toggle="modal" data-target="#wm-modal">
        2016: Screenshot</a>
    </h4>
    <p>
      An awesome description
    </p>
  </li>
</ul>

图像的奇怪的象形文字加载。模态本身不是问题，它加载，而不是图像：

编辑＃1 ：我发现在指令中使用断点进行调试时，只有第一个锚触发指令。如果我在另一个选项卡中将图像拉出一次，那么每次单击列表中的任何链接时，都会加载该SAME第一个图像，但同时也是如此。我可以告诉它识别content指令中带有断点/监视的wmImageModal变量的值所点击的不同锚点。

我可以看到modal-content元素更新，点击装饰锚时会显示相同的数据，但它不会显示图像。有任何想法吗？在新标签中直接加载图像会显示图像，而不会显示“海图”。

编辑＃2：对于咯咯笑声，我在wmImageModal指令中添加了一个console.log并简化了content字符串：

console.log('element', element, content);

console.log的结果：

点击的每个链接的元素本身都是不同的。也可以通过content输出的值来证明。我手动将data-wm-image-modal data-toggle="modal" data-target="#wm-modal"属性添加到列表中的前5个链接。第一次点击给了我＆＃39; heiroglyph＆＃39;图像，然后任何后续点击实际加载图像。

在使用jQuery＆＃39; s content呈现之前，$('#wm-modal .modal-content').html(content)的价值正在发生变化。

编辑＃3： 好的，我发现有2个图像请求，一个是开发工具的网络选项卡上的XHR，但我不完全确定原因。它肯定是jQuery（v2.2.3）＆amp; Bootstrap（v3.3.6）这样做。

img请求，发生在第一个调用堆栈：

XHR请求，发生在调用堆栈的第二位：

XHR请求详细信息，请注意Accept请求标头：

以下是来自XHR调用堆栈的相关行：

send                    @  lib.js:9203      xhr.send( options.hasContent && options.data || null );
jQuery.extend.ajax      @  lib.js:8684      try { state = 1; transport.send( requestHeaders, done ); }
jQuery.fn.load          @  lib.js:9450      jQuery.ajax( { url: url, type: type || "GET", dataType: "html", data: params } )
Modal                   @  lib.js:46913     this.$element.find('.modal-content').load(this.options.remote, $.proxy(function () { this.$element.trigger('loaded.bs.modal') }, this))
(anonymous function)    @  lib.js:47179     if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
jQuery.extend.each      @  lib.js:365       for ( ; i < length; i++ ) { if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {break;} }
jQuery.fn.jQuery.each   @  lib.js:137       each: function( callback ) { return jQuery.each( this, callback ); },
Plugin                  @  lib.js:47174     function Plugin(option, _relatedTarget) { return this.each(function () { 
(anonymous function)    @  lib.js:47217     Plugin.call($target, option, this)
jQuery.event.dispatch   @  lib.js:4737      ret = ( ( jQuery.event.special[ handleObj.origType ] || {} ).handle || handleObj.handler ).apply( matched.elem, args );
elemData.handle         @  lib.js:4549      return typeof jQuery !== "undefined" && jQuery.event.triggered !== e.type ? jQuery.event.dispatch.apply( elem, arguments ) : undefined;

Answer 1

好的，还有另一个属性，我不知道Bootstrap的模态：data-remote

将其设置为false会使XHR请求消失＆amp;要加载的图像。

data-remote="false"

我仍有问题，但动态添加属性不会显示任何内容。

在这个帖子中发现了给我解决方案的线索。实施后，它立即开始正常工作：Load content with ajax in bootstrap modal

用于装饰锚标记的Angular指令，其中另一个指令不起作用

1 个答案: