0
私は角度jを学習しようとしていますが、この問題があります。別のタブ付きブートストラップフォームを別のコントローラとやりとりする方法
ブートストラップのウェブサイト（http://getbootstrap.com/javascript/#tabs）に記載されているように、ブートストラップタブがあります。それぞれのタブは、フォーム、ログイン、サインアップ、パスワードを忘れたフォームであり、それぞれのフォームにはng-appとng-controllerがあります。
最初のタブ（ログイン）はコントローラだけで動作し、私がしたいことをします。
私の問題は、2番目と3番目のタブが自分のコントローラーには行かないということです。
また、最初のタブでは、md-button属性はレンダリングされますが、2番目と3番目のタブでは表示されません（3つのコントローラのすべての角型アプリケーションにngMaterialが含まれています）。
サインアップのフォームを最初の位置（現在ログインしている場所）に移動すると、それは機能します。
私は詳細を提供するために開いています。
私を助けてください。
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) {
}
) ;
}
}
}) ;
})() ;
3番目のタブのコントローラは次のとおりです。
(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上記の変更をご覧ください。詳細が必要な場合。 –