Question

你好一些pleeeease帮我这个。我是棱角分明的新手。我想将两个控制器应用到我的表中。这两个控制器是在不同的模块下创建的。该模块来自npm install。它被命名为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>

Answer 1

你不能在一个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) {
   /*  ...  */
   });

多角度控制器

1 个答案: