多個角度控制器

你好，一些pleeeease幫助我。我對角度很陌生。我想將兩個控制器應用到我的表格。這兩個控制器是在不同的模塊下創建的。該模塊來自npm安裝。它被命名爲angular-table-resize。這是下面的代碼。表調整大小功能似乎不工作多個角度控制器

控制器

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

你不能在一個HTML元素上聲明瞭兩個控制器，但你可以做的是應用一個控制器到父元素，一個控制到一個孩子，像這樣：

<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的代碼嗎？我相信我可以更快地幫你發現這樣的工作應用程序的問題:) –

謝謝。我剛剛創建了一個https://plnkr.co/edit/glLJfA2RKC3vbTSiiI8k?p=catalogue –

多個角度控制器

回答

相關問題