在我的AngularJS应用中,我想在单击按钮时将输入字段的值传递给控制器。我正在为此做的事情发布在下面,但它不起作用。所以请指导出什么问题了?
index.html
<input type="text" ng-model="searchKey">
<button type="button" ng-click="loadSearch(searchKey)">Search</button>
myCtrl.js
app.controller('myCtrl', function($scope, $http) {
function loadSearch(key) {
alert(key);
}
});
答案 0 :(得分:0)
尝试以下方法。
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
this.loadSearch = function(key) {
alert(key);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller='MyController as ctrl' ng-app="myApp">
<input type="text" ng-model="searchKey">
<button type="button" ng-click="ctrl.loadSearch(searchKey)">Search</button>
</div>
答案 1 :(得分:0)
AngularJS在控制器和视图之间创建两种方式的数据绑定。要启用双向绑定,您必须使用
$scope
$scope
是一个内置对象,包含应用程序数据和 方法。您可以在内部的$ scope对象创建属性 控制器功能并为其分配值或功能。 $作用域 是控制器和视图(HTML)之间的粘合剂。
在您的示例中,loadSearch
方法与$scope
没有关联,因此在视图中不可用。要解决此问题,$scope.loadSearch
是正确的方法。
此外,您无需将searchkey
传递给该函数,因为它与ng-model
关联并且在控制器范围内可用。您可以在控制器中轻松alert($scope.searchKey)
。
请参阅下面的代码段以供参考。
angular.module("app", []).controller('myCtrl', function($scope, $http) {
$scope.loadSearch = function() {
alert($scope.searchKey);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="app" ng-controller="myCtrl">
<input type="text" ng-model="searchKey">
<button type="button" ng-click="loadSearch()">Search</button>
</body>