gpt4 book ai didi

javascript - Angularjs:两个 View ,相同的 Controller - 共享范围

转载 作者:行者123 更新时间:2023-12-03 12:38:37 24 4
gpt4 key购买 nike

如何使用路由来加载/更新多个 View /模板?根据我的阅读,不可能使用 Angular 路由同时加载多个部分。那么你如何处理这个问题呢?如果应用程序比博客复杂一点,那么您可能希望在路线更改时同时更改几个位置。

这是 html 示例:

<!DOCTYPE html>

<html>
<body ng-app='Basal' ng-controller="MainCtrl">
<header>
<div>
<nav id='main-menu'>
<ul>
<li ng-click="menuItem('tables')"> Tables </li>
.....
</nav>
</div>
<div id='context-menu' ng-include="contextMenu"> </div>
</header>

<main ng-view></main>

</body>
</html>

所以我需要通过 ng-view 加载主应用程序和此应用程序的子菜单通过 ng-include在标题中。不确定这是否是正确的方法,但它有效并且允许我同时加载许多模板。我会使用主菜单中的一个功能来加载应用程序,例如 <li ng-click="menuItem('tables')"> Tables </li>然后将其传递给 switch在主 Controller 中。像这样:

  $scope.contextMenu = '';
$scope.menuItem = function (i) {
switch (i) {
case 'tables':
$location.path('/tables');
$scope.contextMenu = '/views/tables/tables-menu.html';
break;
default:
.....
}
}

请告诉我这是否可以接受,因为这可能是导致我的问题的原因。

现在,两个模板都设置在同一个 Controller 下。 ng-view的 Controller 模板设置在 when $routeProvider的功能以及 ng-include 的 Controller 模板设置为 ng-controller像这样:

<div class='app-ctrl' id='tables-ctrl' ng-controller="TablesCtrl">

<nav class='app-menu'>
<ul>
<li ng-click="newTable()"> Create </li>
<li ng-click="editTable()"> Edit </li>
<li ng-click="delTable()"> Delete </li>
<li ng-click="testTable()"> Test </li>
</ul>
</nav>
<div><button class='search'>Search</button></div>
</div>

此模板仅加载应用程序的控制按钮。两个 View 都有相同的 Controller - TablesCtrl

TablesCtrl Controller 我处理按钮点击。例如

$scope.testTable = function() {  
$scope.test = "blah";
}

$scope.test仅从我设置 ng-click 的顶部模板可见指令。为什么?如果两个模板都由同一 Controller 控制,为什么我在一个模板中看到 set 变量,而在另一个模板中却看不到?如何使一个模板中的按钮处理另一个模板中的范围。我认为将两个 View 放在同一个 Controller 下就可以了,但显然不行。我从文档中了解到,两个 View 具有不同的范围,但我认为相同的 Controller 可以使其可访问。

如果我想在一个模板中加载按钮,但它们在另一个模板中影响和处理的数据,最好的方法是什么?

抱歉,如果不清楚,但我正在努力如何解释我的困惑。我对 Angular 和 JavaScript 都很陌生。

谢谢。

最佳答案

我强烈推荐模块 ui-router 。它轻松支持多种模板。查看multiple--named-views部分,并且比使用 ngRoute 指令更灵活。

关于javascript - Angularjs:两个 View ,相同的 Controller - 共享范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23613332/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com