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