При нажатии кнопки событие не запускается в AngluarJS - PullRequest
Новая
       0

При нажатии кнопки событие не запускается в AngluarJS

0 голосов
/ 13 февраля 2019

В моем приложении 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);
    }
});

Ответы [ 2 ]

0 голосов
/ 13 февраля 2019

AngularJS создает двустороннюю привязку данных между контроллером и представлением.Чтобы включить двустороннее связывание, вы должны использовать $scope

$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>
0 голосов
/ 13 февраля 2019

Попробуйте следующий подход. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...