如何获取输入值搜索框并使用 Enter 键将其输入到 AngularJS 组件中

在 AngularJS 中获取输入值并将其传递到组件是一个常见的需求。本文将介绍如何在搜索框中获取值，并使用键盘上的 Enter 键将其传递到 AngularJS 组件中。

HTML 部分

我们首先需要在 HTML 中创建一个搜索框和一个 AngularJS 组件。

<div ng-app="myapp">
  <input type="text" ng-model="searchQuery" ng-keyup="$event.keyCode == 13 && search()">
  <my-component search-query="searchQuery"></my-component>
</div>

这里我们创建了一个带有 ng-model 和 ng-keyup 指令的输入框，并在其中绑定了 searchQuery 变量。在 ng-keyup 中，我们检查了按下的键是否是 Enter 键，并调用了 search 函数。

我们还创建了一个名为 my-component 的 AngularJS 组件，并传递了 searchQuery 变量作为输入参数。

JavaScript 部分

我们需要在 JavaScript 代码中定义 myapp 应用和 my-component 组件。

angular.module('myapp', [])
  .component('myComponent', {
    bindings: {
      searchQuery: '<'
    },
    template: `
      <div>
        Search Query: {{ $ctrl.searchQuery }}
      </div>
    `,
    controller: function() {
      console.log('myComponent loaded');
    }
  })
  .controller('myCtrl', function() {
    console.log('myCtrl loaded');

    this.search = function() {
      console.log('Search Query: ' + this.searchQuery);
    };
  });

我们首先创建了一个名为 myapp 的 AngularJS 应用，并定义了 my-component 组件。在组件中，我们使用 bindings 属性来定义输入参数，并将 searchQuery 绑定到 $ctrl.searchQuery 变量上。

在组件的 template 中，我们输出了 searchQuery 变量。

接下来，我们创建了一个名为 myCtrl 的控制器，并定义了 search 函数。在函数中，我们将搜索查询打印到控制台中。

结论

现在，我们已经创建了一个输入框和一个 AngularJS 组件，并且可以通过按下 Enter 键来触发 search 函数，并将搜索查询传递给组件。

完整的代码示例如下:

<div ng-app="myapp" ng-controller="myCtrl as ctrl">
  <input type="text" ng-model="ctrl.searchQuery" ng-keyup="$event.keyCode == 13 && ctrl.search()">
  <my-component search-query="ctrl.searchQuery"></my-component>
</div>

<script>
  angular.module('myapp', [])
    .component('myComponent', {
      bindings: {
        searchQuery: '<'
      },
      template: `
        <div>
          Search Query: {{ $ctrl.searchQuery }}
        </div>
      `,
      controller: function() {
        console.log('myComponent loaded');
      }
    })
    .controller('myCtrl', function() {
      console.log('myCtrl loaded');

      this.search = function() {
        console.log('Search Query: ' + this.searchQuery);
      };
    });
</script>

你可以将应用程序扩展到更复杂的场景，例如将搜索查询发送给服务器进行处理，并显示查询结果。