首先阅读文档 - angularjs docs

Question

这是我的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服务但是这可以工作，我添加了另一个控制器，它使用切换按钮来显示和隐藏。

Answer 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; 
        });
  }]);

Answer 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％是否正常，没有尝试过，但逻辑保持不变

有两个ng-controller with angularJS

2 个答案:

首先阅读文档 - angularjs docs