相关疑难解决方法(0)

我的问题涉及如何在AngularJS应用程序中处理模板(也称为部分)的复杂嵌套.

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

正如您所看到的,这可能是一个包含大量嵌套模型的相当复杂的应用程序.

应用程序是单页面的,因此它会加载一个index.html,其中包含DOM中带有ng-view属性的div元素.

对于圆圈1,您会看到有一个主要导航将相应的模板加载到ng-view.我是通过传递$routeParams到主app模块来做到这一点的.这是我的应用程序中的一个示例:

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应用程序来处理模板的这种复杂嵌套,同时保持它们彼此分离？

我目前正在使用AngularJS,ngAnimate,Angular-Material和UI-Router开发移动Web应用程序.我正在遵循UI/UX部分的Google Material Design规范.

我想动画状态改变'Angular方式',特别是这个'Parent to child'动画

我不知道如何实现这种"提升和扩展"动画.

谢谢你的帮助 !