Angular指令来装饰锚定标记与另一个指令不工作

Question

我想通过有一个指令装饰所有我的锚定标记给定列表中的一个指令，所以我不必复制/粘贴相同代码超过&。

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

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

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); 
     }); 
    } 
    }; 
}); 

并为完整起见，我包括我使用的引导模式脚手架。整个模式是不是该指令的元素的一个孩子，但兄弟姐妹到列表：

<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：我看到，随着指令断点调试时，只有第一锚触发的指令。如果我在另一个选项卡中将图像拉出一次，那么每次单击列表中的任何链接时都会加载同一个第一个图像，但同一手上。我可以告诉它识别出wmImageModal指令中带有断点/监视的content变量值被点击的不同锚点。

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

EDIT＃2：对于笑声，我添加一个的console.log到wmImageModal指令和简化了content字符串：

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

那的console.log的结果：

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

在呈现之前使用jQuery的$('#wm-modal .modal-content').html(content)之前，发生了一些值content。

编辑＃3： 好吧，我发现有对图像制成，一个是的开发工具在网络选项卡上XHR 2级的要求，但我不完全知道为什么。这绝对是jQuery（v2.2.3）& 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

好了，有一个我不知道的为引导的模式的另一个属性：data-remote

将其设置为false，使XHR请求离开&的图像加载。

data-remote="false" 

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

是给我的解决方案在此线程&发现实施时的线索，它会立即开始正常工作：Load content with ajax in bootstrap modal