AngularJS指令導致與頁面佈局

Question

我已經下載ACE管理http://www.bootstraptemplates.net/ace-responsive-admin-template

現在，我嘗試在我的AngularJS項目使用它的問題。當我使用模板的一部分並將它分離到自定義指令中時，問題就出現了。我試圖儘可能地減少代碼，並隔離我想描述的問題，並且我已經制作了一個https://plnkr.co/edit/4Xdk9dSlTWl4rWap7zav?p=info搶劫者。

如果打開頁面content.html有一個

<sidebar></sidebar> 

指令。

此指令導致的

<div class="main-content-inner"> 

回落其下。

但是當你複製從sidebar.html的代碼，並用它代替

<sidebar></sidebar> 

指令獲取所需要的佈局。

我不知道如何處理這種行爲。

Answer 1

試試這個

app.js

angular.module('myApp', []) 

    .directive("pageContent", function() { 
     return { 
      templateUrl: "page-content.html", 

     }; 
    }) 

    .directive("sidebar", function() { 
     return { 
      templateUrl: "sidebar.html", 
      replace:true, 
     }; 
    });