【问题标题】：Having two ng-controller with angularJS有两个带有 angularJS 的 ng-controller
【发布时间】：2016-06-14 21:08:50
【问题描述】：

这是我的 JS 文件

var camListApp = angular.module('camListApp', []);
camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){
    $http.get('http://localhost:8080/camera/list').then(function(response) {
            $scope.records= response.data; 
        });
  }]);
camListApp.controller('Hello2',['$scope', function($scope){
    $scope.custom = true;
    $scope.toggleCustom = function() {
       $scope.custom = ! $scope.custom;
    };
}]);

这是我的 HTML 文件

<html ng-app='camListApp'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"> 
</script>
<script src="hello.js"></script>
<title>Image downloader </title>
</head>


<body>
<h3>Search by cameraid:</h3><br>
<select ng-model="searchBox" style="width:25%">
<option value="000000006f4280af">000000006f4280af</option>
<option value="002">002</option>
<option value="0011">0011</option>
</select>


<div ng-controller="Hello">
<br>
 <table>
    <thead>
      <tr>

        <th>CamID</th>
        <th>Timestamp</th>
        <th>View Image</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="record in records | filter:searchBox">

        <td>{{record.cameraid}}</td>
        <td>{{record.timestamp}}</td>
        <div ng-controller="Hello2">
         <td><button ng-click="toggleCustom()">View</button></td>

      </tr>
    </tbody>
   </table>
   <span ng-hide="custom">From:
        <input type="text" id="from" />
    </span>
    <span ng-show="custom"></span>
 </div>

</body>
</html>

如何让两个控制器在一个应用程序中工作？因为我找不到任何方法让他们同时工作。第一个控制器是使用 angularjs 使用我的 Web 服务，但这能够工作，我添加了另一个控制器，它使用切换按钮来显示和隐藏。

【问题讨论】：

div 不是tr 中的有效元素。另外，是否有任何控制台错误？
就像@devqon 写的，你的html 是无效的，你甚至没有用ng-controller 关闭你的div
那么我应该把 div 放在哪里？
丢掉这个div，比如把ng-controller放在td上面
我关闭但仍然无法工作。 @kTT

标签： javascript angularjs

【解决方案1】：

您的代码存在几个问题。首先，div 不是tr 的子元素的有效元素，所以丢掉那个。

其次，如果您保持当前范围，您的 custom 属性将在您的第二个控制器之外：

<!-- the Hello2 controller and its scope is only available on the td 
itself and its children. You use your 'custom' property outside of this,
so that won't work -->
<td ng-controller="Hello2"><button ng-click="toggleCustom()">View</button></td>

查看您的范围，您应该只使用第一个控制器，并将代码放在那个控制器上：

var camListApp = angular.module('camListApp', []);
camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){

    $scope.custom = true;
    $scope.toggleCustom = function() {
       $scope.custom = ! $scope.custom;
    };
    $http.get('http://localhost:8080/camera/list').then(function(response) {
            $scope.records= response.data; 
        });
  }]);

【讨论】：

那么我应该如何将代码放入我的第一个控制器中？
有效！我只是删除第二个控制器并按照你的方法。！

【解决方案2】：

首先阅读文档 - angularjs docs

您的问题的答案是 - 否，您的 .html 文件可能有一个控制器

但如果您希望重用您的逻辑，可以通过工厂和服务来完成 - angularjs docs

另一个必读：angularjs good practice

让我们把它应用到你的代码上

app.js

angular

    .module('camListApp', []);

myCtl.controller.js

angular

    .module('camListApp')
    .controller('myCtl', myCtl);

function myCtl($scope, myFactory) {

    var vm = this;
    vm.doSomething = myFactory.someFactoryFunction;

}

myFactory.factory.js

angular

    .module('camListApp')
    .factory('myFactory', myFactory);

function myFactory($http) {

    return {
        someFactoryFunction: retrieveSomeData
    };

    function retrieveSomeData() {

        $http.get('http://localhost:8080/camera/list')

        .then(success)
        .catch(error);

        function success(response) {
            return response.data;
        }

        function error(response) {
            // handle error
        }

    }

}

view.html

...
<div ng-controller="myCtl">
    <button ng-click="vm.doSomething()">View</button>
</div>
...

不确定上面的代码是否100% 工作，没有尝试，但逻辑保持不变

【讨论】：