[英]Having two ng-controller with angularJS
這是我的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
的子元素不是有效的元素,因此請丟失該元素。
其次,如果您保持當前的作用域,則您的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;
});
}]);
問題的答案是- 不 ,您的.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%正常工作 ,沒有嘗試,但是邏輯保持不變
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.