angularjs – 分体和模板的复杂嵌套
|
我的问题涉及如何在AngularJS应用程序中处理复杂的模板嵌套(也称为partials)。 描述我的情况的最好方法是使用我创建的图像： 正如你可以看到，这有可能是一个相当复杂的应用程序与大量的嵌套模型。 该应用程序是单页面的，因此它加载了一个index.html，其中包含一个带有ng-view属性的DOM中的div元素。 对于圆1，您会看到有一个主导航将相应的模板加载到ng视图中。我这样做通过传递$ routeParams到主应用程序模块。这里是我的应用程序的一个例子： angular.module('myApp',[]).
config(['$routeProvider',function($routeProvider) {
$routeProvider.
when("/job/:jobId/zones/:zoneId",{ controller: JobDetailController,templateUrl: 'assets/job_list_app/templates/zone_edit.html' }).
when("/job/:jobId/initial_inspection",templateUrl: 'assets/job_list_app/templates/initial_inspection.html' }).
when("/job/:jobId/zones/:zoneId/rooms/:roomId",templateUrl: 'assets/job_list_app/templates/room_edit.html' })
}]);
在圆2中，加载到ng-view中的模板有一个附加的子导航。这个sub-nav然后需要加载模板到它下面的区域 – 但由于ng-view已经使用，我不知道如何去做这个。 我知道我可以在第一个模板中包括额外的模板，但这些模板都将是相当复杂。我想保持所有的模板单独，以使应用程序更容易更新，没有依赖父模板必须加载，以访问它的孩子。 在第3圈，你可以看到事情变得更加复杂。存在潜在的子导航模板将具有第二子导航，其需要将其自己的模板也加载到圆圈4中的区域中 如何构建一个AngularJS应用程序来处理这样复杂的模板嵌套，同时保持它们彼此独立？ 嗯，因为你目前只能有一个ngView指令…我使用嵌套指令控件。这允许您设置模板并继承(或隔离)它们之间的范围。除此之外，我使用ng开关甚至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> 指令为子导航 app.directive('mySubNav',function(){
return {
restrict: 'E',scope: {
current: '=current'
},templateUrl: 'mySubNav.html',controller: function($scope) {
}
};
});
模板为子导航 <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> 主页面的模板(来自主导航) <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>
主页控制器。 (从主导航) app.controller('page1Ctrl',function($scope,$routeParams) {
$scope.sub = $routeParams.sub;
});
子区域的指令 app.directive('mySubArea1',templateUrl: 'mySubArea1.html',controller: function($scope) {
//controller for your sub area.
}
};
});
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |