AngularJS - 使用两个不同的控制器?
AngularJS - Use two different controllers?
我开始尝试 AngularJS,但我不确定如何更新导航栏选择。我在 index.html 中有 2 个东西,导航栏(带有我需要更新的选项卡)和带有 ngView 的 div。
对于不同的视图,我使用 ngRoute 来更改模板并将控制器附加到这些模板。但是,对于导航栏,我不确定是否应该在 HTML 中添加 "ng-controller="tabController"。
这似乎不正确,因为我已经在检查视图的路线,而且我会检查它两次。
这是我的导航栏代码和带有视图的 div,其中具有 class "active" 的 li 应该与 [=] 中显示的视图对齐30=]:
<nav class="navbar navbar-default" ng-controller="tabController">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#/">Recetas Helper</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#/">Home</a></li>
<li class="active"><a href="#/helper">Helper</a></li>
<li><a href="#/insert">Insertar</a></li>
<li><a href="#/randomizer">Randomizer</a></li>
</ul>
</div>
</nav>
<div class="main-view" ng-view></div>
这是我的 app.js 代码,其中控制器和路线已检查:
var app = angular.module('confApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "partials/home.html",
controller: "homeController"
})
.when("/helper", {
templateUrl: "partials/helper.html",
controller: "helperController"
})
.when("/insert", {
templateUrl: "partials/insert.html"
})
.when("/randomizer", {
templateUrl: "partials/randomizer.html"
})
.otherwise({
templateUrl: "partials/ups.html"
});
});
app.controller('tabController', function($scope) {...});
app.controller('homeController', function($scope) {...});
app.controller('helperController', function($scope) {...});
我第一次在SO里提问,所以请告诉我是否遗漏了任何重要信息,或者相反。谢谢!!
据我了解,您基本上是在使用 nav-bar
并相应地更改路线。称它为 Tab
会使它更加混乱,因为 TAB 与导航栏不同。我的建议:
- 将其重命名为
Navigation Controller
- 如果您使用的是 1.5 及更高版本,请创建一个组件,因为它们是新版本 AngularJS 1.X
的更好方法
- 对于您分享的上述代码,您可以勾选
$location
并相应地使用ng-class
将active
class应用到选定的div
。这将是唯一的解决方案,因为您需要将 active
class 应用于 div
,这将根据 routing
呈现
休息一切正常
我开始尝试 AngularJS,但我不确定如何更新导航栏选择。我在 index.html 中有 2 个东西,导航栏(带有我需要更新的选项卡)和带有 ngView 的 div。
对于不同的视图,我使用 ngRoute 来更改模板并将控制器附加到这些模板。但是,对于导航栏,我不确定是否应该在 HTML 中添加 "ng-controller="tabController"。 这似乎不正确,因为我已经在检查视图的路线,而且我会检查它两次。
这是我的导航栏代码和带有视图的 div,其中具有 class "active" 的 li 应该与 [=] 中显示的视图对齐30=]:
<nav class="navbar navbar-default" ng-controller="tabController">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#/">Recetas Helper</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#/">Home</a></li>
<li class="active"><a href="#/helper">Helper</a></li>
<li><a href="#/insert">Insertar</a></li>
<li><a href="#/randomizer">Randomizer</a></li>
</ul>
</div>
</nav>
<div class="main-view" ng-view></div>
这是我的 app.js 代码,其中控制器和路线已检查:
var app = angular.module('confApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "partials/home.html",
controller: "homeController"
})
.when("/helper", {
templateUrl: "partials/helper.html",
controller: "helperController"
})
.when("/insert", {
templateUrl: "partials/insert.html"
})
.when("/randomizer", {
templateUrl: "partials/randomizer.html"
})
.otherwise({
templateUrl: "partials/ups.html"
});
});
app.controller('tabController', function($scope) {...});
app.controller('homeController', function($scope) {...});
app.controller('helperController', function($scope) {...});
我第一次在SO里提问,所以请告诉我是否遗漏了任何重要信息,或者相反。谢谢!!
据我了解,您基本上是在使用 nav-bar
并相应地更改路线。称它为 Tab
会使它更加混乱,因为 TAB 与导航栏不同。我的建议:
- 将其重命名为
Navigation Controller
- 如果您使用的是 1.5 及更高版本,请创建一个组件,因为它们是新版本 AngularJS 1.X 的更好方法
- 对于您分享的上述代码,您可以勾选
$location
并相应地使用ng-class
将active
class应用到选定的div
。这将是唯一的解决方案,因为您需要将active
class 应用于div
,这将根据routing
呈现
休息一切正常