AngularJS - 從數據庫加載的指令不會替換爲模板

我有一個從數據庫進來的指令。與短代碼在Wordpress中的工作方式類似，用戶需要能夠在這裏和那裏插入這些自定義畫廊。我嘗試了幾種方法。他們編譯但不會影響頁面上的HTML。我錯過了什麼？AngularJS - 從數據庫加載的指令不會替換爲模板

傳入從數據庫：

<p>Lorem Ipsum. Some content here</p> 
<div work-gallery friendly="bq"></div>

我想用「工作畫廊」屬性以與模板替換DIV。當我將這些內容加載到我的頁面範圍內時，我會對其進行編譯，以便觸發我的指令。

從控制器

$compile($scope.page.content)($scope);

這會觸發指令，它編譯一直到需要的地方添加或更換，然後就不會在前臺顯示。如果我在動態加載的內容之外添加DIV，它就可以工作。

指令

app.directive('workGallery', function ($compile) { 
    var template = '<div>TEST{{page.med.length}}</div>'; 

    return { 
     restrict: 'A', 
     replace: true, 
     link: function (scope, ele, attrs) { 
      scope.page.med = [1, 2]; 
      scope.$watch(attrs.friendly, function() { 
       ele.html(template); 
       $compile(ele.contents())(scope); 
       console.log(ele); 
       ele.append(ele.contents()); 
      }); 
     } 
    }; 
});

檢查「元素」，揭示TEST2如果我挖通下來的innerText但是這就是我得到的。任何幫助表示讚賞！據我所知，這應該在我的內容中添加「TEST2」。

期望輸出

<p>Lorem Ipsum. Some content here</p> 
<div work-gallery friendly="bq">TEST2</div>

任何幫助表示讚賞！

來源

2017-04-17 Tom V

我覺得有什麼錯看屬性，嘗試：

attrs.$observe('friendly', function(val){ 
    /* .... */ 
});

來源

2017-04-17 15:23:34

我同意，這是基於對SO另一個演示。這仍然不利於數據沒有花費或取代原始DIV的事實。感謝您的輸入！ –

AngularJS - 從數據庫加載的指令不會替換爲模板

回答

相關問題