AngularJS的设计问题 - 嵌套视图

我是AngularJS的新手，我正面临与视图相关的问题。我有这样的（伪代码）的模型AngularJS的设计问题 - 嵌套视图

class Contract{ 
    int IdContract; 
    int Title; 
    int IdPerson; 
} 

class Person{ 
    int IdPerson; 
    string FirstName; 
string LastName; 
}

现在，我应该有这条路线的myapp /合同/编辑相匹配的视图contractEdit.html。在该观点中，应该有某种嵌套视图来显示与我正在编辑的合同相关联的人员详细信息。我应该如何与Angular做到这一点？我对Views和Directives感到困惑......它应该是一个指令吗？

任何帮助将不胜感激

来源

2013-04-11 Sam

你可以使用[NG-包括（http://docs.angularjs.org/api/ng.directive:ngInclude ）拉入部分以显示人物细节。 – 2013-04-12 03:07:26

对不起，我刚刚看到你的帖子，我错过了它。实际上，使用ng-include似乎是可能的，但就我的研究而言，使用指令似乎更常见，也更干净，即使其他人倾向于说应该使用ui-router。我想我会采取指导性的方式。 – Sam 2013-04-13 15:32:03

有多种方法可以解决这个问题。

首先很简单，很脏，使用ng-include。例如。创建一个名为PersontTmpl.html模板文件：

<div> 
    {{person.firstName }} {{person.lastName}} 
</div>

现在，每当你需要显示一个人，确保有一个person对象的范围，并添加以下行：

<ng-include src="'somepathToTemplate/PersonTmpl.html'"></ng-include>

嗯，这是肮脏的解决方案，因为你将永远不得不向同一名称下的作用域公开人员。

第二种方式是创建一个指示：

angular.module('nameofyourmodule') 
    .directive('person', function() { 
    return { 
     templateUrl: 'somepathToTemplate/PersonTmpl.html', 
     restrict: 'AE', 
     scope:{person:"="} 
    }; 
    });

现在，当你想显示“currentPerson”你必须做以下的事情在其他模板/视图：

<div person='currentPerson' />

此调用将显示用'currentPerson'对象初始化的人员模板。

要真正理解指令是如何工作的，我建议看Writing Directives (by Misko Hevery)演示，或者尝试阅读official documentation

来源

2013-04-13 02:10:47 jusio

我必须已经完成了整个文档，并没有真正提供任何示例来解决这个特定的（但是非常普遍的）问题，所以，谢谢你给我一些线索。我实际上已经得出结论，指令是要走的路，我的'嵌套视图'实际上比显示名字和姓氏要复杂得多（但你已经猜到了）。需要为该指令设置一个控制器，但似乎可能，我只是不知道是否有很多日志ic在指令中...... – Sam 2013-04-13 08:05:14

@那么，在指令中有一个控制器是完全有效的（在指令定义对象中有一个特殊的参数），它也是将参数传递给控制器的唯一可靠方法。指令本身也不包含任何逻辑。所有这些都将被委派到控制器和模板中，指令本身将简单地重用它，并且它们将共享相同的范围。我可以添加示例如何在指令中使用控制器如果您想 – jusio 2013-04-13 15:11:48

没关系，我已经在线看到了一些示例。但它们都非常简单。我想我将不得不在SO上发布一个新问题来解释我想要实现的全貌。我需要先玩指导。谢谢！ – Sam 2013-04-13 15:29:56

它不应该是指令。

您考虑嵌套视图和您的权利。目前AngularJS不支持嵌套视图，但有Router项目，它不会

如果你不想走那么远，然后坚持观点。

来源

2013-04-11 21:39:31 Marek

我超级超级与Angular混淆。我遇到过这个链接（http://www.bennadel.com/blog/2441-Nested-Views-Routing-And-Deep-Linking-With-AngularJS.htm），这个人解释了他是如何开发一个工作 - 围绕缺乏嵌套视图。然后，我已经穿过这个链接（http://jan.varwig.org/archive/how-to-do-nested-views-in-angularjs-hint-dont），他们在那里解释说我们不应该使用嵌套而不是使用指令。我刚刚通过了指令文档。在这种特殊情况下，我会试图使用它们。然后有你，告诉我我不应该:) – Sam 2013-04-11 21:50:27

正如你所指出的第一个家伙显示工作，这很好。我建议你阅读这些https：// github。com/angular-ui/ui-router/wiki并查看一下示例http://angular-ui.github.io/ui-router/sample/对于第二个人他有点重要，因为人们可能已经以错误的方式接近嵌套视图。 UI路由器似乎是一个正确的方式。你可以谷歌其他嵌套视图相关的问题，它都指向路由器 – Marek 2013-04-11 22:01:12

所以这两个人都是对的。这很难做出决定。我可以看到ui-router的意义，因为它看起来更像我习惯的（我来自ASP.net MVC世界，其中有类型/控制器/动作/参数的URL。另一方面，ui -router似乎是一个独立的项目，可能永远不会是Angular的一部分，我即将开始一个大型项目，所以我有点害怕开始使用这种类型的项目（不是它不好，但它可能会不是持久的，艰苦的生活...... – Sam 2013-04-12 06:58:53

AngularJS的设计问题 - 嵌套视图

回答

相关问题