使用 Angular 路由渲染明文，ui-view

Question

我正在使用 Angular 1.3，使用 ui-router 和 ui-view 创建视图。我在 index.html 文件上添加了 ui-view，它有菜单、页脚和中间 ui-view 的主要内容。

我已经使用 $stateProvider.state('state_name')

的状态创建了整个应用程序

现在我想创建一个纯文本页面，没有 html 标签，只有纯文本。但问题是当我为此创建路由时，它包括页眉和页脚，这是 Angular 的正确行为。但是我如何创建一个没有菜单的视图，包括页脚，只有我将添加到视图文件中的纯文本，以及路由。有什么解决办法吗？

Answer 1

您可以将更改绑定到主控制器的服务。 this 问题的第一个答案解释了如何实现这一点。

我已经为您的特定用例修改了 Plnkr 示例 here

app.factory('Page', function(){
  var visible = true; 
  return {
    visible: function() { return visible; },
    setVisible: function(state) { visible = state}
  };
});

名为 Page 的工厂为主控制器和 ng-views 内的控制器提供了对可见变量的访问。

目的是在控制器中更改此可见变量，以更改 ng-view 之外主要组件的可见性。

function MainCtrl($scope, Page) {
  $scope.Page = Page;
}

为此我们在主控制器中有一个可以访问页面服务的绑定。

<html ng-app="myApp" ng-controller="MainCtrl">
<body>
<h1 ng-hide="Page.visible()">Page Header</h1>
<ul>
  <li><a href="test1">test1</a>
  <li><a href="test2">test2</a>
</ul>
</html>

并且在 html 中，我们定义 ng-if 由 MainContorllers 页面中的这个可见变量控制。

function Test1Ctrl($scope, Page) {
  Page.setVisible(false);
}

最后，我们可以从其他视图调用更改可见性函数，以更改页眉和页脚在主视图中的可见性。

使用 Angular 路由渲染明文，ui-view

Render plaintext using Angular route, ui-view

plaintext

angularjs

angular-ui-router