栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

零件和模板的复杂嵌套

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

零件和模板的复杂嵌套

好吧,由于您目前只能有一个ngView指令,所以我使用了嵌套指令控件。这使您可以在它们之间设置模板作用域并继承(或隔离)作用域。除此之外,我使用ng-switch或什至只是ng-show来根据$ routeParams的输入来选择要显示的控件。

编辑这是一些示例伪代码,可让您大致了解我在说什么。带有嵌套子导航。

这是主应用页面

<!-- primary nav --><a href="#/page/1">Page 1</a><a href="#/page/2">Page 2</a><a href="#/page/3">Page 3</a><!-- display the view --><div ng-view></div>

Directive for the sub navigation

app.directive('mySubNav', function(){    return {        restrict: 'E',        scope: {current: '=current'        },        templateUrl: 'mySubNav.html',        controller: function($scope) {        }    };});

template for the sub navigation

<a href="#/page/1/sub/1">Sub Item 1</a><a href="#/page/1/sub/2">Sub Item 2</a><a href="#/page/1/sub/3">Sub Item 3</a>

template for a main page (from primary nav)

<my-sub-nav current="sub"></my-sub-nav><ng-switch on="sub">  <div ng-switch-when="1">      <my-sub-area1></my-sub-area>  </div>  <div ng-switch-when="2">      <my-sub-area2></my-sub-area>  </div>  <div ng-switch-when="3">      <my-sub-area3></my-sub-area>  </div></ng-switch>

Controller for a main page. (from the primary nav)

app.controller('page1Ctrl', function($scope, $routeParams) {     $scope.sub = $routeParams.sub;});

Directive for a Sub Area

app.directive('mySubArea1', function(){    return {        restrict: 'E',        templateUrl: 'mySubArea1.html',        controller: function($scope) { //controller for your sub area.        }    };});


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/436378.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号