Question

我在根模板<div ui-view=""></div>中定义了ui-view。如果该内容为空，是否可以自动隐藏该视图？

我正在寻找类似的线程一段时间，但所有人建议检查当前路线或将vars传递给rootScope我不喜欢。我正在寻找最简单的解决方案 - 检查所需的视图是否有任何内容定义，如果没有 - 隐藏它的div（或任何其他html标记）

Answer 1

我想展示或分享 - 我的方式如何解决这个问题。如果我仔细阅读这个问题，我会说这是一个类似的故事。否则，请将其作为提示......

情景：我们需要一个地方，如果需要，我们可以在那里展示一些东西。并隐藏，如果......不需要。我们将其称为工具栏，并假设它在根状态下被定义为View，并且旨在由任何子状态/控制器管理....

$stateProvider
 .state('myModule', {
    url: "/mm",           // sub root 'mm' like MyModule
    views: {
      'body@': {          // this way we inject into index.html
          templateUrl: ..  // the MyModule root template
          controller: 'RootCtrl',   // the root controller
       },
       'toolbarView@myModule' : { // the view is part of MyModule template
          templateUrl: ..
          controller: ..
       },
       ... // standard defintions of the root state
...

这里的本质是默认情况下应该呈现 View 。可见性将由该视图管理：

不应该检查：我内心是否有任何内容......
但应检查：我的模型设置 IsVisible 是否设为true？

事实上它会非常简单。在我们的根控制器RootCtrl中，我们可以/必须为我们的 Model视图声明toolbar：

// inside of the 'RootCtrl'
$scope.ToolbarModel = {
    IsVisible : false,
    ViewUrl : null,
};
$scope.ToolbarModel.close = function(){
    this.ViewUrl : null;
    this.IsVisible = false;
}

这可能是我们的 Toolbar查看：

// toolbar class can position this view from the global perspective
<div class="toolbar" 
     ng-show="ToolbarModel.IsVisible" >
     // the view is managing its visiblity by Model values 

   <button class="btn btn-default btn-xs"
           ng-click="ToolbarModel.close()" 
           // anyone can anywhere hide us

   </button>

   // holder class representing some inner scrolling area...
   <div class="holder"
     ng-include="ToolbarModel.ViewUrl" >
     // this way we inject the passed 'ViewUrl'

   </div>
</div>

就是这样。 ng included 视图可以包含需要$state，$stateParams的控制器的指令......并且做了很多。

我在这里看到的好处：

视图是在根视图上定义的，因此我们可以从全局视角定位它
没有黑客攻击。纯粹的角度方式
- 视图始终呈现（实际上是一次，同时属于Root状态的一部分）并立即隐藏，以防IsVisible === false。
- 任何深度的儿童都可以使用它，包括拨打ToolbarModel.close()
- 只需点击一下close() ......如果不需要就不会打扰
我们不会在此处针对现有angular和ui-router功能创建任何扩展程序，只使用可用的内容

最后回答一个问题：

如果该内容为空，是否可以自动隐藏该视图？

是的，我们可以在任何地方管理$scope.ToolbarModel.IsVisible。

（注意：如果需要，这就是为什么每个孩子都可以使用该模型What are the nuances of scope prototypal / prototypical inheritance in AngularJS?）

Answer 2

我意识到这是一个古老的问题，但还有另一种方法可以用CSS做到这一点。

您可以使用：empty选择器检查内容并以此方式隐藏ui-view div。

有条件的ui-view

2 个答案: