我正在尝试将下拉菜单中的链接连接到带有标签的页面,将各自的链接连接到各自的标签。现在,包含下拉菜单的页面和包含选项卡的页面位于不同的HTML页面中,并拥有自己的ng-controller
。
header_view.html
<div role="navigation" ng-controller="HeaderController" xmlns="http://www.w3.org/1999/html" class="nav navbar navbar-default navbar-fixed-top ng-cloak">
<li class="mobile-hide dropdown">
<a href="#" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle usermenu">
{{model.firstname}}
<div class="glyphicon glyphicon-menu-down small ml"></div>
</a>
<ul role="menu" class="dropdown-menu">
<li class="arrow"></li>
<li role="menuitem">
<a href="#" ng-click="userPrefs()">Personal Information<div class="glyphicon glyphicon-chevron-right"></div></a>
<div class="subtext">Update your email, phone number and mailing addresses.</div>
</li>
<hr class="divider"/>
<li role="menuitem">
<a href="#" ng-click="userPrefs()">Sign In & Security<div class="glyphicon glyphicon-chevron-right"></div></a>
<div class="subtext">Update your username, password and security question.</div>
</li>
<hr class="divider"/>
<li role="menuitem"><a href="#" ng-click="userPrefs()">Account Preferences<div class="glyphicon glyphicon-chevron-right"></div></a>
<div class="subtext">Indicate your email and postal mail preferences.</div>
</li>
<div href="" ng-click="signout()" class="signout text-center">Sign Out</div>
</ul>
</li>
</div>
header.controller.js
angular.module('ogn.navTop').controller('HeaderController', ['$scope',
function($scope) {
$scope.userPrefs = function() {
console.log('ENV.name' + ENV.name);
$window.location.href = 'userprefs.html';
};
}
]);
subnav.html
<div ng-controller="UserprefsController" class="subnav-tabs">
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active">
<ng-include src="tab.content"></ng-include>
</tab>
</tabset>
</div>
userprefs.controller.js
angular.module('ogn.userprefs').controller('UserprefsController', ['$scope',
function($scope) {
$scope.tabs = [
{ title: 'Personal Information', content: 'modules/userprefs/views/personalinfo.html'},
{ title: 'Sign In & Security', content: 'modules/userprefs/views/signin_security.html'},
{ title: 'Account Preferences', content: 'modules/userprefs/views/accountprefs.html'}
];
}]);
是否建议将控制器放入另一个控制器(或者甚至可以工作)?如果页面不知道可用于调用选项卡的控制器,如何将下拉链接连接到选项卡?如果可能的话,我需要在纯Angular中执行此操作。提前谢谢!
答案 0 :(得分:0)
这听起来像嵌套视图的简单情况。我建议使用angular ui路由器插件来处理所有路由。它处理路由非常优雅,给你很多可能性,你的链接将只是一个从现在开始的状态。
详情请见Angular UI Router GitHub page。
通过正确设置,您可以使用ui-sref
指令创建指向视图的链接,以便其中一个下拉列表中的链接变为:
<a ui-sref="mainState">Go to main view</a>
<a ui-sref="mainState.subTab1">Go to main view and tab 1</a>
这使得阅读html和深度链接更加简单。