AngularJS指令导致页面布局问题

Question

我已下载ace admin http://www.bootstraptemplates.net/ace-responsive-admin-template

现在我尝试在AngularJS项目中使用它。当我使用模板的一部分并将其分成自定义指令时，就会出现问题。我试图尽可能地减少代码并隔离我想要描述的问题并且我已经制作了https://plnkr.co/edit/4Xdk9dSlTWl4rWap7zav?p=info plunker。

如果您打开page-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,
        };
    });