AngularJS嵌套控制器

我有一个2路线的AngularJS应用程序/首页和/约。AngularJS嵌套控制器

我使用ng-router，每条路由有不同的控制器HomeCtrl和AboutCtrl。默认路线是/首页。

事情是，在显示内容之前，我想添加一个预加载器，只是一个简单的div，当内容加载时会隐藏。

<div class="myApp"> 

    <div class="preloader"></div> 

    <div ui-view></div>  

    </div>

我的问题是，我应该在哪个控制器中添加这个？我应该在ng-view之外为这种东西添加一个新的控制器吗？

有人可以解释我的最佳做法吗？

来源

2016-02-26 Hiero

可以触发多种不同的方式在一个指令 – charlietfl

我想这样做的最好方法是使用数据加载指示在控制器中的标志。因此，如果data-LoadedFlag为false，则可以使用ng-if指令依赖此标志，如果dataLoadedFlag为false，则可以使用加载指示器显示“div”，否则请使用div。

来源

2016-02-26 14:08:48

但问题是，预加载其外部UI视图http://jsbin.com/lebakurewa/1/edit？html，输出 – Hiero

你有ng-view，你的视图在那里用相应的控制器进行渲染。

所以你需要NG-如果

<ng-view> 
    <div ng-if="!$scope.contentIsReady"> 
     content loading 
    </div> 
    <div ng-if="$scope.contentIsReady"> 
      content here 
    </div> 
</ng-view>

来源

2016-02-26 14:09:26

但是preloader div在ui-view之外，它的东西就像这样http://jsbin.com/lebakurewa/1/edit?html,output – Hiero

所以把它放在ng-view –

hm ，你确定它的最佳做法？如果在路由器中使用“解析”， – Hiero

@Hiero的唯一的事情在你的课程时，你必须创建新的控制器。

你也可以使用嵌套视图。事情是这样的：

$stateProvider.state('home', { 
     url: '/home', 
     views: { 
      "main": { 
       templateUrl: '....', 
       controller: '....' 
      }, 
      '[email protected]': { 
       templateUrl: '...', 
       controller: '...', 
      } 
     } 
    });

多见于https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

来源

2016-02-26 14:16:14

AngularJS嵌套控制器

回答

相关问题