有两个带有angularJS的ng-controller
[英]Having two ng-controller with angularJS
问题描述
This is my JS file 
这是我的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;
};
}]);
This is my Html file 这是我的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>
How can i have two controllers to work in an app? 如何在应用程序中使用两个控制器？ As i cannot find any way for them to work at the same time. 因为我找不到他们可以同时工作的任何方式。 The first controller is to consume my web service with angularjs but this is able to work and i added another controller that is using toggle a button to show and hide. 第一个控制器是使用angularjs来使用我的Web服务，但是它可以工作，我添加了另一个控制器，该控制器使用切换按钮来显示和隐藏。
2 个解决方案
解决方案1
1 已采纳 2016-06-14 12:33:31
There are several issues with your code. 您的代码有几个问题。 First of all, div is not a valid element as a child of a tr , so lose that one. 首先， div作为tr的子元素不是有效的元素，因此请丢失该元素。
Secondly, your custom property is outside of your second controller if you maintain the current scoping: 其次，如果您保持当前的作用域，则您的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>
Looking at your scoping you should just only use the first controller, and put the code on that one: 查看范围，您应该只使用第一个控制器，然后将代码放在该控制器上：
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
0 2016-06-14 13:08:50
read the documentation first - angularjs docs 首先阅读文档-angularjs文档
the answer to your question is - no , your .html file may have one controller 问题的答案是- 不 ，您的.html文件可能只有一个控制器
but if you wish to reuse your logics, it's done via factories and services - angularjs docs 但是，如果您希望重用逻辑，则可以通过工厂和服务来完成-angularjs docs
another must-read: angularjs good practice 另一个必读的内容： angularjs的良好实践
so let's apply that on your code 所以让我们将其应用于您的代码
app.js app.js
angular
.module('camListApp', []);
myCtl.controller.js myCtl.controller.js
angular
.module('camListApp')
.controller('myCtl', myCtl);
function myCtl($scope, myFactory) {
var vm = this;
vm.doSomething = myFactory.someFactoryFunction;
}
myFactory.factory.js 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 view.html
...
<div ng-controller="myCtl">
<button ng-click="vm.doSomething()">View</button>
</div>
...
not sure if the code above is 100% working , didn't try it out, but the logic stays the same 不知道上面的代码是否100％正常工作 ，没有尝试，但是逻辑保持不变
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.