Невозможно получить значение из представления HTML в контроллер, используя Angular. Решение возвращает переменную $ scope undefined

0

Привет, ребята, я пытаюсь получить некоторый ввод из текстового поля, используя угловое ng-bind и получить доступ к нему в контроллере. В настоящее время, когда я пытаюсь распечатать его, я получаю undefined. Понравилась бы какая-то помощь, и я уверен, что я что-то упустил из своей настройки.

Это мой HTML

    <div class="text-center rounded-box" ng-app="AuthorisationTicketApp" ng-controller="LookupTicketController">
<form>

    <b>Please insert text:</b>
    <input type="text" name="text" ng-bind="text" />
</form>

<div class="lg-margin-top">
    <a href="#lookup-ticket" class="btn btn-lg btn-primary">Submit</a>
</div>

Мой контроллер

authorisationTicketApp.controller('LookupTicketController', ['$scope', 
function($scope) {

console.log('LookupTicketController .... called');

console.log('text' + $scope.text);
console.log('$scope ' + $scope);

}]);

Мой app.js

var authorisationTicketApp = angular.module('AuthorisationTicketApp', ['ngRoute']);

authorisationTicketApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/input-text', {
    templateUrl: contextPath + 'partials/input-text.html',
    controller: 'LookupTicketController'
}).
when('/lookup-ticket', {
        templateUrl: contextPath + 'partials/lookup-ticket.html',
        controller: 'LookupTicketController'
}).
otherwise({
    redirectTo: '/'
});

}]);

Мой консольный выход

LookupTicketController .... called controllers.js:11:1
$ text undefined controllers.js:13:1
$scope [object Object]
Теги:

4 ответа

4

Используйте ng-model для вашего тега ввода вместо ng-bind. Это будет двустороннее связывание с значением в контроллере:

<input type="text" name="text" ng-model="text" />
Поделиться
  • 0
    Просто быть чистым. Я использовал ng-bind, потому что не хотел двухстороннего связывания. Основная цель - получить переменную из поля ввода в метод отдыха моего контроллера пружины.
  • 0
    Вам все еще нужно получить значение в свой контроллер, чтобы отправить его в конечную точку REST. Это был бы идиоматический способ чтения значения из ввода и отправки в конечную точку на Ангуаре.
Показать ещё 4 комментария
2

Это из документации:

Используйте контроллеры для: * Настройка начального состояния объекта $ scope.

Не используйте его для регистрации. Он должен содержать только бизнес-логику. Постройте его:

authorisationTicketApp.controller('LookupTicketController', ['$scope', 
function($scope) {

$scope.text = "test";
console.log('LookupTicketController .... called');

}]);

Тогда это должно сработать.

Поделиться
  • 0
    Состояние объекта области видимости должно быть установлено только тем, что введено в поле ввода.
0

Весь ваш код контроллера является кодом конструктора, а свойство text не существует во время построения. Вам понадобится метод, который вы вызываете в другом месте после построения, который вы можете создать с помощью $ scope.myMethod = function() {...}, и вы должны иметь возможность ссылаться на $ scope.text изнутри. Это также хорошая практика, чтобы инициализировать свойство text с помощью $ scope.text = '' в вашем конструкторе.

Поделиться
0

Это сработало для меня. Пожалуйста, посмотрите, используя ng-model

<ion-modal-view>
    <ion-content>
        <input class="form-input" type="text" ng-model="test.relation"/>
        <button class="button button-bar button-positive" ng-click="answer()">Click Me</button>
    </ion-content>
</ion-modal-view>

В своем контроллере обновите свой код следующим образом:

$scope.test = {};
$scope.answer = function(){
    console.log($scope.test.relation);
}

Ответьте, если у вас есть какие-либо вопросы.

Поделиться
  • 0
    Это не выглядит правильно для меня Анил, мне нужно мое решение для работы. Если я работаю с другим решением, которое вводит новые переменные, мне все равно придется перепроектировать его, чтобы вернуться к моему простому решению
  • 0
    ваше решение выдает исключение ng: areq Bad Argument, когда я его пробовал

Ещё вопросы

Сообщество Overcoder
Наверх
Меню