Question

我有控制器的控制器和模板视图。

ProductCtrl =＆gt; products.html放在
SomeCrtl =＆gt; Some.html
FooCtrl =＆gt; Foo.html

我在主页上有一个 ui-view 。

<html> 
   <body> 
     <a href="#/product"></a>
     <a href="#/some"></a>
     <a href="#/foo"></a>
     <div ui-view></div> 
       ....

状态配置如下：

app.config(["$stateProvider", function ($stateProvider) {
    $stateProvider.state("product", {
        url: "/product",
        templateUrl: "templates/Products.html",
        controller: "ProductCtrl"
    });
}])

应用程序启动时，我的上一个视图出现在 ui-view 上。但我希望 ui-view 应为空。当我点击链接时，应该查看该内容。

Answer 1

尝试使用HTML元素包装ui-view，并根据当前状态使用ng-hide进行操作隐藏。

代码示例

<div ng-hide="$state.current.name === 'home'">
    <div ui-view></div>
</div>

Answer 2

另一种做@bookmarker提到的方法：

<div ng-hide="$state.includes('home')">
    <div ui-view></div>
</div>

$state.includes('...')可用于查看状态是否包含指定状态，即检查子状态是否包含某个父状态。

angularjs在特定状态下隐藏ui-view

2 个答案: