如何使不同的选项卡式引导表单与不同的控制器通信
Posted
技术标签:
【中文标题】如何使不同的选项卡式引导表单与不同的控制器通信【英文标题】：How to make different tabbed bootstrap forms talk to different controllers 【发布时间】：2017-08-12 19:30:25 【问题描述】：我正在尝试学习 Angular js，但我遇到了这个问题。
我有一个引导程序网站 (http://getbootstrap.com/javascript/#tabs) 所述的引导程序选项卡。每个选项卡都是一个表单，比如登录、注册和忘记密码，每个表单都有一个 ng-app 和一个 ng-controller，当然还有各自的 ng-model。
第一个选项卡（登录）仅适用于控制器并执行我想要的操作。
我的问题是第二个和第三个选项卡没有转到它们自己的控制器。
此外，在第一个选项卡上，md-button 属性呈现，但在第二个和第三个选项卡上它没有呈现（是的，我已将 ngMaterial 包含在 3 个控制器的所有 Angular 应用程序中）。
当我将注册表单移动到第一个位置（当前登录位置）时，它可以工作。
我愿意提供更多细节。
请帮帮我。
html代码如下。
<div class="">
<div style="margin-top:50px;" class="container mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTabs" role="tablist">
<li role="presentation" class="active"><a href="" data-target="#student" aria-controls="student" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-user"></i> Student</a></li>
<li role="presentation"><a href="" data-target="#teacher" aria-controls="teacher" role="tab" data-toggle="tab">Teacher</a></li>
<li role="presentation"><a href="" data-target="#administrator" aria-controls="administrator" role="tab" data-toggle="tab">Administrator</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="student">
<div id="loginbox" ng-app="studentLogin">
<div class="panel panel-info" >
<div class="panel-heading">
<div class="panel-title">Student sign in</div>
<div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Forgot password?</a></div>
</div>
<div style="padding-top:30px" class="panel-body" ng-controller="StudentLoginController">
<div id="login-alert" class="alert alert-danger col-sm-12" ng-if="login_error_message" ng-cloak>
<strong><i class="fa fa-warning"></i> Error:</strong> login_error_message <span id="login-alert-message"></span>
</div>
<form id="loginForm" class="form-horizontal" role="form" name="studentAuthForm" method="get">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" placeholder="Student ID number" required autofocus ng-model="studentNumber"/>
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" placeholder="password" required autofocus ng-model="password"/>
</div>
<div class="input-group">
<div class="checkbox">
<label>
<input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
</label>
</div>
</div>
<div style="margin-top:10px" class="form-group">
<!-- md-button -->
<div class="col-sm-12 controls">
<md-button class="md-primary md-raised" ng-click="authenticate();"> <i class="glyphicon glyphicon-log-in"></i> Login </md-button>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
Add disclaimer here!
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="teacher">
<div id="loginbox">
<div class="panel panel-info" >
<div class="panel-heading">
<div class="panel-title">Teacher sign in</div>
<div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Forgot password?</a></div>
</div>
<div style="padding-top:30px" class="panel-body" >
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="Email address">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="input-group">
<div class="checkbox">
<label>
<input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
</label>
</div>
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<a id="btn-login" href="#" class="btn btn-success">Login </a>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
Add disclaimer here!
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="administrator">
<div id="loginbox" ng-app="administratorLogin">
<div class="panel panel-info" >
<div class="panel-heading">
<div class="panel-title">Administrator sign in</div>
<div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Forgot password?</a></div>
</div>
<div style="padding-top:30px" class="panel-body" ng-controller="AdministratorLoginController">
<div id="login-alert" class="alert alert-danger col-sm-12" ng-if="login_error_message" ng-cloak>
<strong><i class="fa fa-warning"></i> Error:</strong> login_error_message <span id="login-alert-message"></span>
</div>
<form id="loginForm" class="form-horizontal" role="form" method="get">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" placeholder="Email address" required autofocus ng-model="emailAddress">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" placeholder="password" required autofocus ng-model="password">
</div>
<div class="input-group">
<div class="checkbox">
<label>
<input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
</label>
</div>
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<button class="btn btn-primary" ng-click="authenticateAdministrator();" > <i class="glyphicon glyphicon-log-in"></i> Login </button>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
Add disclaimer here!
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
第一个选项卡的控制器位于下方。
(function ()
'use strict';
angular
.module('studentLogin' , ['ngMaterial'])
.controller('StudentLoginController', function ($scope, $http)
$scope.authenticate = function ()
if ($scope.studentNumber == undefined || $scope.password == undefined)
alert("Check") ;
else
var url = get_base_url() + 'student/authentication/login?studentNumber=' + $scope.studentNumber + '&password=' + $scope.password ;
$http.post(url).then(
function (response)
if (response.data.error == "true" )
$scope.login_error_message = response.data.result[0].message ;
else
alert ("Error") ;
, function (response)
) ;
) ;
)() ;
第三个标签的控制器如下所示。
(function ()
'use strict';
angular
.module('administratorLogin' , ['ngMaterial'])
.controller('AdministratorLoginController', function ($scope, $http)
alert ("test") ;
$scope.authenticateAdministrator = function ()
alert ("test 2") ;
var url = get_base_url() + 'administrator/authentication/login?emailAddress=' + $scope.emailAddress + '&password=' + $scope.password ;
$http.post(url).then(
function (response)
if (response.data.error == "true" )
$scope.login_error_message = response.data.result[0].message ;
else
alert ("Error") ;
, function (response)
alert ("Service error.");
) ;
) ;
)() ;
【问题讨论】：
请附上您的代码 @CarstenLøvboAndersen 请参阅上面的更改。如果您需要更多详细信息。 【参考方案1】：您不能在单个 HTML 文档中使用多个 ngApp 指令。你可以在这里阅读https://docs.angularjs.org/api/ng/directive/ngApp
在您的情况下，您可以在单个模块中注册所有控制器并将其用作 ngApp 指令中的引导程序，该指令在根 html 元素中定义。或者你可以在一个单独的模块中注册你的控制器，但是将它们设置为主模块的依赖。
angular.module('myModule', [DependencyModule1, DependencyModule2]);
你可以看这里https://docs.angularjs.org/guide/module
【讨论】：
【参考方案2】：我最终所做的是为所有选项卡使用相同的 ng-app，然后在同一控制器中为每个表单创建单独的 ng-click。它同样解决了 md 按钮的问题。
【讨论】：
以上是关于如何使不同的选项卡式引导表单与不同的控制器通信的主要内容，如果未能解决你的问题，请参考以下文章
MS Access 选项卡式表单多个 OnCurrent 触发
使用 Core Data 的选项卡式应用程序，每个选项卡上都有不同的主从表视图