Question

我正在尝试将下拉菜单中的链接连接到带有标签的页面，将各自的链接连接到各自的标签。现在，包含下拉菜单的页面和包含选项卡的页面位于不同的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中执行此操作。提前谢谢！

Answer 1

这听起来像嵌套视图的简单情况。我建议使用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和深度链接更加简单。

将下拉链接连接到特定选项卡

1 个答案: