別のタブ付きブートストラップフォームを別のコントローラとやりとりする方法

私は角度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."); 
       } 
      ) ; 
     } 
    }) ; 
    })() ;

出典

2017-03-21 Femencha Azombo Fabrice

コードを入れてください –

@CarstenLøvboAndersen上記の変更をご覧ください。詳細が必要な場合。 –

複数のngAppディレクティブを1つのHTMLドキュメントで使用することはできません。ここでこれについて読むことができますhttps://docs.angularjs.org/api/ng/directive/ngApp

すべてのコントローラを1つのモジュールに登録し、ルートhtml要素で定義されているngAppディレクティブのブートストラップとして使用できます。あるいは、コントローラを別のモジュールに登録することもできますが、メインモジュールの依存関係として設定することもできます。

angular.module('myModule', [DependencyModule1, DependencyModule2]);

あなたは私が最終的にすべてのタブに同じngのアプリを使用していたし、同じコントローラ内の各フォームのために別々のNG-クリックを作成したのは何ここhttps://docs.angularjs.org/guide/module

出典

2017-03-21 10:19:13

見ることができます。 md-buttonの問題も同様に解決されました。

出典

2017-03-21 11:05:03

別のタブ付きブートストラップフォームを別のコントローラとやりとりする方法

答えて

関連する問題