让 ng-view 只显示它的内容，而不是它本身答案

【问题标题】：Make ng-view display only its contents, not itself让 ng-view 只显示它的内容，而不是它本身
【发布时间】：2019-08-26 03:19:02
【问题描述】：

我正在开发一个小型 AngularJS 博客应用程序（我使用的框架版本是 1.7.8）。

我还使用了一个 HTML 模板，不是我自己做的，我更愿意对其进行很少的更改如果有的话。

保持以下 HTML 结构很重要，因为它的样式是 CSS：

#main {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

#main>.inner {
  padding: 20px;
  color: #fff;
  background: #333;
}

<section id="main">
  <div class="inner">
    <p>Ad eum nibh mutat porro, sit no minimum dissentias, ceteros explicari persecuti sea ei.</p>
  </div>
</section>

问题：

我在路由的帮助下显示视图：

angular.module('app', [
    'ngRoute',
    'app.controllers'
]).config(['$routeProvider', function($routeProvider){
    $routeProvider.when('/', {
        templateUrl: 'templates/posts.html',
        controller: 'PostsController'
    }).when('/post/:slug', {
        templateUrl: 'templates/singlepost.html',
        controller: 'SinglePostController'
    }).otherwise({
        redirectTo: '/'
    });
}]);

这需要在我的 index.html 文件中添加一个 <ng-view></ng-view> 块。当然，这会使 CSS 的很大一部分变得无用，如下所示：

#main {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

#main>.inner {
  padding: 20px;
  color: #fff;
  background: #333;
}

<section id="main">
  <ng-view>
    <div class="inner">
      <p>Ad eum nibh mutat porro, sit no minimum dissentias, ceteros explicari persecuti sea ei.</p>
    </div>
  </ng-view>
</section>

注意：我知道将#main>.inner 替换为#main .inner 可以解决上述样式问题，但sn-p 只是帮助我说明问题的一个示例（演示）。我需要一个不需要更改 CSS 的解决方案。

有没有办法让 ng-view 只显示它的内部 HTML，而不是它本身？

【问题讨论】：

我认为唯一的解决方法是使用 replace: true 创建自定义指令，该指令将包装 ng-view stackoverflow.com/questions/25353822/…
<ng-view> 需要保留以使其可用于所有路由。您将需要修改一些东西...结构或 css
您如何使用ng-view 作为属性？ <section id="main" ng-view> 如所述 here

标签： javascript html css angularjs

【解决方案1】：

您如何使用ng-view 指令作为属性？

#main {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

#main>.inner {
  padding: 20px;
  color: #fff;
  background: #333;
}

<section id="main" ng-view>
    <div class="inner">
      <p>Ad eum nibh mutat porro, sit no minimum dissentias, ceteros explicari persecuti sea ei.</p>
    </div>
</section>

有关详细信息，请参阅

AngularJS ng-view Directive API Reference

【讨论】：