有两个带有angularJS的ng-controller

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文档

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

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

另一个必读的内容： angularjs的良好实践

所以让我们将其应用于您的代码

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

有两个带有angularJS的ng-controller

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-06-14 12:33:31

解决方案2
0 2016-06-14 13:08:50

首先阅读文档-angularjs文档

有两个带有angularJS的ng-controller

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-06-14 12:33:31

解决方案2 0 2016-06-14 13:08:50

首先阅读文档-angularjs文档

解决方案1
1 已采纳 2016-06-14 12:33:31

解决方案2
0 2016-06-14 13:08:50