gpt4 book ai didi

javascript - 有两个带有 angularJS 的 ng-controller

转载 作者:行者123 更新时间:2023-12-03 06:44:20 25 4
gpt4 key购买 nike

这是我的 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>

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

最佳答案

您的代码存在几个问题。首先,div 不是 tr 子元素的有效元素,因此丢失该元素。

其次,如果您保持当前的作用域,您的自定义属性将位于第二个 Controller 之外:

<!-- 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>

查看您的范围,您应该只使用第一个 Controller ,并将代码放在该 Controller 上:

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

关于javascript - 有两个带有 angularJS 的 ng-controller,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37811802/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com