Question

在我的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);
    }
});

Answer 1

尝试以下方法。

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>

Answer 2

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>

点击按钮事件未在AngluarJS中触发

2 个答案: