Как я могу вызвать функцию нажатием кнопки, которая уже настроена для запуска нажатием клавиши «Ввод» нажатием AngularJS?

Question

Итак, я пытался сделать возможным добавление товара в корзину одним нажатием кнопки рядом с нажатием клавиши ВВОД (теперь это единственный способ добавить товар в корзину), я пробовал много раз, но, к сожалению, все способы не работают вообще. Это проект системы POS, построенный с AngularJS (что, по моему опыту, очень слабое) И мне нужно сделать это плохо, вот часть HTML:

<tr>
    <td colspan="6" class="text-center">

        <input autofocus autocomplete="off" list="product-list"
               id="product-entry" type="text" class="form-control"
               name="product-reference" required/><br/>

        <button id="myButton" ng-click="" >Add Product to Sale</button>

        <datalist id="product-list">
            <option ng-repeat="item in inventory" value="{{ item.name }}">
            </option>
        </datalist>
    </td>
</tr>

I нужно сделать, когда кто-то нажимает «myButton», я представляю, что мне нужно добавить некоторую функцию в директиву ng-click, но приветствуются любые другие способы

А вот часть JS:

        // POS Section
pos.controller('posController', function ($scope, $routeParams, Inventory, Transactions) {

  $scope.barcode = '';

  function barcodeHandler (e) {

      $scope.barcodeNotFoundError = false;

      $scope.barcode = $('#product-entry').val();

      var regex=/^[0-9]+$/;

      // if enter is pressed
      if (e.which === 13) {

        if(!$scope.barcode.match(regex)){
          for(var i = 0; i < $scope.inventory.length; i++) {
            if($scope.inventory[i].name === $scope.barcode) {
              $scope.barcode = $scope.inventory[i].barcode;
              break;
            }
          }
        }

        if ($scope.isValidProduct($scope.barcode)) {
          $scope.addProductToCart($scope.barcode);
          $scope.barcode = '';
          $scope.productsList = '';
          $scope.$digest();
          $('#product-entry').val($scope.barcode);
        }
        else {
          window.alert('product not found: ' + $scope.barcode);
          console.log('invalid product: ' + $scope.barcode);
          // $scope.barcodeNotFoundError = true;
        }
      }
  }

  $('#product-entry').off('keypress').on('keypress', barcodeHandler);

Answer 1

То, что вы делаете, это прослушивание события keyup на поле, и если этот ключ совпадает с ключом возврата, он продолжается с вашими логами c.

Если вы переместите лог c в свою собственную функцию (до barcodeHandler), вы можете получить к нему доступ в другом месте:

$scope.doSomething = function() {
  $scope.barcodeNotFoundError = false;
  $scope.barcode = $('#product-entry').val();
  var regex=/^[0-9]+$/;

  if(!$scope.barcode.match(regex)){
    for(var i = 0; i < $scope.inventory.length; i++) {
      if($scope.inventory[i].name === $scope.barcode) {
        $scope.barcode = $scope.inventory[i].barcode;
        break;
      }
    }
  }

  if ($scope.isValidProduct($scope.barcode)) {
    $scope.addProductToCart($scope.barcode);
    $scope.barcode = '';
    $scope.productsList = '';
    $('#product-entry').val($scope.barcode);
  }
  else {
    window.alert('product not found: ' + $scope.barcode);
    console.log('invalid product: ' + $scope.barcode);
    // $scope.barcodeNotFoundError = true;
  }
};

Затем внутри barcodeHandler, используйте:

if (e.which === 13) {
  $scope.doSomething();
}

Теперь в вашей разметке, вы можете сделать:

<button id="myButton" ng-click="doSomething()">Add Product to Sale</button>

Добавление чего-либо к $scope контроллера - это способ сделать его доступным в представлении.