从index.html调用视图控制器

时间:2019-01-07 20:35:07

标签: angularjs

我有一个index.html,其中有一个带有链接的顶部栏和一个带有链接的侧栏。我希望将中心替换为内容(ng-view)。假设顶部栏是图片,统计信息,聊天。侧边栏是老虎,狮子,熊。

这些永远不会改变。这就是为什么index.html保留它们的原因。图片,统计,聊天的顶部栏我想实际路由到其他视图/控制器(在index.html上替换ng-view)。容易。

但是,当我在给定的视图控制器(例如Pictures)中时,我现在想知道单击了哪个侧边栏(我想在应用程序中首次单击Pictures时默认使用给定的侧边栏动物,因为并且我也希望能够直接将链接复制到那里(即Pictures / Bears(但这始终只是转到Pictures控制器,但是我知道在其中单击了Bears,因此我可以采取相应措施))。

因此,如果我单击Tigers,控制器将知道这一点,并且我可以对其进行编码以获取Tigers的图片。

我不想将侧边栏放到每个页面中,因为它总是一样的。我只是希望在index.html上避免重复自己,即使这在编码每个顶部条形视图方面会更直接。如果我要求做的事情是不可能的,那将是我会回过头来的事情。

我还想知道,当他们单击其他顶部链接动物时,是否有可能保持当前的边栏值。因此,如果我在“图片/狮子”中并且单击“熊”,它将知道要路由“图片/熊”。由于它一直留在Pictures中,它是否真的需要进行路由?它可以路由并在传入动物的Pictures控制器上调用一个方法,以便它可以使用该信息来完成所需的工作吗?

1 个答案:

答案 0 :(得分:1)

尝试提供类似animalService的服务来跟踪所选动物。就像您自己的该侧菜单的路由处理程序一样。

然后,侧面菜单的控制器将能够调用animalService.selectAnimal(selectedAnimal)来更新选择。

然后,每个主页控制器可以从animalService监视所选动物的值。有几种方法可以执行此操作,但是使用基于订阅的方法可能最简单:

每个控制器将在初始化时调用animalService.subscribeToChange('controllerName', callback),然后在销毁时将调用animalService.unsubscribeFromChange('controllerName')animalService会保留所有已订阅控制器的列表/映射,因此每次调用selectAnimal函数并检测到更改时它都可以执行回调。

如果您提供代码示例,我可以尝试提供更详细的解决方案。

或者

您可以利用$rootScope的优势。我发现这有点棘手,但是可能会更快地实现。侧面菜单可以通过类似$root.currentAnimal的方式访问根范围变量,并且可以获取和设置该值。然后,每个控制器都可以使用$rootScope.$watch('currentAnimal', function() {})来触发更改($rootScope是一项服务)。