角度の複数のコントローラ

こんにちはいくつかのpleeeeaseは私を助けます。私は新しい角度になっています。両方のコントローラをテーブルに適用したい。これらの2つのコントローラは、異なるモジュールで作成されます。モジュールはnpmからインストールされています。これは、angle-table-resizeという名前です。以下にコードを示します。テーブルには、機能を使用すると、1つのHTML要素上の2つのコントローラを宣言することはできませんが、何を行うことができますが適用され角度の複数のコントローラ

コントローラ

var app = angular.module('myApp', ['ngTableResize']); 
app.controller('AppCtrl', ['$scope',function($scope) { 


    $scope.resizeMode = "FixedResizer"; 
}]); 


var app2 = angular.module('myApp2', []); 
app2.controller('AppCtrl2', ['$scope','$http',function($scope,$http) { 
    $scope.num = -1; 
    $http.get('/enodeb').success(function(response){ 
     $scope.ue = response; 
    }); 

}]);

HTML

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
    <link rel="stylesheet" href="node_modules/angular-table-resize/dist/angular-table-resize.min.css"> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

    <meta charset ="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content= "IE=edge"> 
    <title></title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 


</head> 
<body> 
    <div ng-table="tableParams" class="container" ng-Controller="AppCtrl" style="margin-left:180px"> 
    <h1>ERIS/BUDS Mismatches</h1> 
     <table resizeable mode="resizeMode" class="table draggable sortable" id="myTable"> 
      <thead> 
       <tr> 
        <th id="colName1"><a>EnodeB</a></th> 
        <th id="colName2"><a>Product(BUDS)</a></th> 
        <th id="colName3"><a>SerialNum(BUDS)</a></th> 
        <th id="colName4"><a>Bams-ID(BUDS)</a></th> 
        <th id="colName5"><a>Product(ERIS)</a></th> 
        <th id="colName6"><a>SerialNum(ERIS)</a></th> 
        <th id="colName7"><a>Bams-ID(ERIS)</a></th> 

       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat = "device in ue"> 
        <td>{{device.enodeBname}}</td> 
        <td>{{device.productnum_buds}}</td> 
        <td>{{device.serialnum_buds}}</td> 
        <td>{{device.bamsid_buds}}</td> 
        <td>{{device.productnum_eris}}</td> 
        <td>{{device.serialnum_eris}}</td> 
        <td>{{device.bamsid_eris}}</td> 

       </tr> 
      </tbody> 


     </table> 
    </div> 

    <script src="angular-table-resize.min.js"></script> 
    <script src="jquery.min.js"></script> 
    <script type="text/javascript" src="angular.min.js"></script> 
    <script type="text/javascript" src="Controller/controller.js"></script> 
    <script src="dragtable.js"></script> 
    <script src="sorttable.js"></script> 



</body>

出典

2016-11-18 X.Xin

を働いていないようですサイズを変更します1つのコントローラを親要素に、1つを子にすると、次のようになります。

<div ng-controller="AppCtrl"> 
    <table ng-controller="AppCtrl2"> 
     <!-- both AppCtrl's and AppCtrl2's scopes are available here --> 
    </table> 
</div>

メインコードmyAppとそれ以外のモジュールmyApp2を定義しましたが、メインモジュールの依存関係としてmyApp2を設定していないことに注意してください。

var app = angular.module('myApp', ['ngTableResize', 'myApp2']);

またはちょうど同じモジュール上の両方のコントローラを定義します：あなたは、どちらかがそれを行う実行する必要があり

angular.module('myApp') 
    .controller('AppCtrl2', ['$scope','$http',function($scope,$http) { 
    /* ... */ 
    });

出典

2016-11-18 18:04:18

は、応答していただきありがとうございます。私はmyAppの依存関係を追加しましたが、その後AppCtrlは動作を停止しました。 –

jsbinやplnkrのようなsthでコードを提供できますか？私ははるかに迅速にそのような作業のアプリで問題を見つけるのを助けることができると確信しています:) –

ありがとう。私はちょうどhttps://plnkr.co/edit/glLJfA2RKC3vbTSiiI8k?p=catalogueを作成しました –

角度の複数のコントローラ

答えて

関連する問題