Question

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

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

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

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

Answer 1

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

我为您的特定用例here

制作了修改后的Plnkr示例

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 route，ui-view渲染明文

1 个答案: