零件和模板的复杂嵌套

2020/09/25 10:21 · javascript ·  · 0评论

我的问题涉及到如何处理AngularJS应用程序模板的复杂嵌套(也称为partials)。

描述我的情况的最好方法是使用创建的图像:

AngularJS页面图

如您所见,这有可能成为具有许多嵌套模型的相当复杂的应用程序。

该应用程序是单页的,因此它将加载index.html索引包含DOM中具有ng-view属性的div元素

对于第1圈,您看到有一个主导航将相应模板加载到中ng-view我通过传递$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", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/initial_inspection.html' }).
            when("/job/:jobId/zones/:zoneId/rooms/:roomId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/room_edit.html' })       

    }]);

在第2圈中,加载到中的模板ng-view具有附加的子导航然后,该子导航需要将模板加载到其下方的区域中-但由于已使用ng-view,因此我不确定如何执行此操作。

我知道我可以在第一个模板中包含其他模板,但是这些模板都将非常复杂。我想将所有模板分开,以使应用程序更易于更新,并且不依赖于必须加载父模板才能访问其子模板。

在第3圈中,您会看到事情变得更加复杂。子导航模板可能会具有第二个子导航,这需要将其自己的模板以及第4圈的区域加载

如何构建一个AngularJS应用程序以处理模板的这种复杂嵌套,同时又将它们彼此分开呢?

好吧,由于您目前只能有一个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>

子导航指令

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', function(){
    return {
        restrict: 'E',
        templateUrl: 'mySubArea1.html',
        controller: function($scope) {
            //controller for your sub area.
        }
    };
});

更新: 检查AngularUI的新项目以解决此问题


对于小节,这就像在ng-include中利用字符串一样简单:

<ul id="subNav">
  <li><a ng-click="subPage='section1/subpage1.htm'">Sub Page 1</a></li>
  <li><a ng-click="subPage='section1/subpage2.htm'">Sub Page 2</a></li>
  <li><a ng-click="subPage='section1/subpage3.htm'">Sub Page 3</a></li>
</ul>
<ng-include src="subPage"></ng-include>

或者,如果您到处都有子页面的链接,则可以创建一个对象:

$scope.pages = { page1: 'section1/subpage1.htm', ... };
<ul id="subNav">
  <li><a ng-click="subPage='page1'">Sub Page 1</a></li>
  <li><a ng-click="subPage='page2'">Sub Page 2</a></li>
  <li><a ng-click="subPage='page3'">Sub Page 3</a></li>
</ul>
<ng-include src="pages[subPage]"></ng-include>

或者你甚至可以使用 $routeParams

$routeProvider.when('/home', ...);
$routeProvider.when('/home/:tab', ...);
$scope.params = $routeParams;
<ul id="subNav">
  <li><a href="#/home/tab1">Sub Page 1</a></li>
  <li><a href="#/home/tab2">Sub Page 2</a></li>
  <li><a href="#/home/tab3">Sub Page 3</a></li>
</ul>
<ng-include src=" '/home/' + tab + '.html' "></ng-include>

您还可以将ng-controller放在每个部分的最顶层

您也可以出于相同目的签出该库:

http://angular-route-segment.com

它看起来像您要找的东西,并且比ui-router使用起来简单得多。演示站点

JS:

$routeSegmentProvider.

when('/section1',          's1.home').
when('/section1/:id',      's1.itemInfo.overview').
when('/section2',          's2').

segment('s1', {
    templateUrl: 'templates/section1.html',
    controller: MainCtrl}).
within().
    segment('home', {
        templateUrl: 'templates/section1/home.html'}).
    segment('itemInfo', {
        templateUrl: 'templates/section1/item.html',
        controller: Section1ItemCtrl,
        dependencies: ['id']}).
    within().
        segment('overview', {
            templateUrl: 'templates/section1/item/overview.html'}).

顶级HTML:

<ul>
    <li ng-class="{active: $routeSegment.startsWith('s1')}">
        <a href="/section1">Section 1</a>
    </li>
    <li ng-class="{active: $routeSegment.startsWith('s2')}">
        <a href="/section2">Section 2</a>
    </li>
</ul>
<div id="contents" app-view-segment="0"></div>

嵌套的HTML:

<h4>Section 1</h4>
Section 1 contents.
<div app-view-segment="1"></div>

我也在Angular的嵌套视图中苦苦挣扎。

一旦掌握了ui-router,我就知道自己再也不会回到默认的角度路由功能了。

这是一个使用多层视图嵌套的示例应用程序

app.config(function ($stateProvider, $urlRouterProvider,$httpProvider) {
// navigate to view1 view by default
$urlRouterProvider.otherwise("/view1");

$stateProvider
    .state('view1', {
        url: '/view1',
        templateUrl: 'partials/view1.html',
        controller: 'view1.MainController'
    })
    .state('view1.nestedViews', {
        url: '/view1',
        views: {
            'childView1': { templateUrl: 'partials/view1.childView1.html' , controller: 'childView1Ctrl'},
            'childView2': { templateUrl: 'partials/view1.childView2.html', controller: 'childView2Ctrl' },
            'childView3': { templateUrl: 'partials/view1.childView3.html', controller: 'childView3Ctrl' }
        }
    })

    .state('view2', {
        url: '/view2',
    })

    .state('view3', {
        url: '/view3',
    })

    .state('view4', {
        url: '/view4',
    });
});

可以看到,有4个主要视图(view1,view2,view3,view4),view1具有3个子视图。

您可以使用ng-include来避免使用嵌套的ng-views。

http://docs.angularjs.org/api/ng/directive/ng包含
http://plnkr.co/edit/ngdoc:example-example39@snapshot?p=preview

我的索引页面使用ng-view。然后在我需要嵌套框架的子页面上。我使用ng-include。该演示显示了一个下拉列表。我用链接ng-click替换了我的。在函数中,我将$ scope.template = $ scope.templates [0]; 或$ scope.template = $ scope.templates [1];

$scope.clickToSomePage= function(){
  $scope.template = $scope.templates[0];
};

Angular ui-router支持嵌套视图。我还没有使用过,但是看起来很有希望。

http://angular-ui.github.io/ui-router/

本文地址:http://javascript.askforanswer.com/lingjianhemobandefuzaqiantao.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!