2015-05-27 4 views
0

JQuery:предварительно заполненные формы данных не определено в службе

$("#inputParentName").val(response.name); 

HTML/Угловая форма:

<form role="form" ng-submit="addParentService.addParent()"> 
    <div class="form-group"> 
     <label for="inputParentName">Name</label><input class="form-control" id="inputParentName" value="" type="text" ng-model="addParentService.inputParentName" /> 
    </div> 
    ... 
    <button class="btn btn-default" type="submit">Submit</button> 
</form> 

Следующий код при запуске diplays мое имя правильно в поле ввода.

Однако в моей службе, когда я пытаюсь понять, что это значение для inputParentName, я получаю неопределенную ошибку. Но, когда я ввожу что-то в текстовое поле для inputParentName, отображается введенное значение.

Controller Код:

myapp.controller('AddParentController', function ($scope, addParentService) { 
    $scope.addParentService = addParentService; 
}); 

Service Code:

myapp.service('addParentService', function() { 
    var vm = this; 
    vm.parent = []; 

    vm.addParent = function() { 
    alert(vm.inputParentName); 
    }; 
}); 

Что я могу сделать по-другому, так что я могу получить предварительно загружены данные для регистрации, так что моя служба признает данные?

Это всего лишь базовый код, который я пытаюсь получить. Я понимаю, что это не чисто AngularJS. Я просто пытаюсь понять, как я могу заставить это работать. Я буду реорганизовать с директивами после того, как все будет работать, как мне кажется.

+0

1-е место, где вы включили jquery с угловыми? –

+0

@pankajparkar - Это всего лишь базовый код, который я пытаюсь получить. Я понимаю, что это не чисто AngularJS. Я просто пытаюсь понять, как я могу заставить это работать. Я буду реорганизовать с директивами после того, как все будет работать, как мне кажется. – webdad3

+0

Кажется, что ваш вызов jQuery меняет значение поля «под радаром» с точки зрения угловатости, и именно поэтому это изменение не обнаружено. Вы можете предварительно заполнить поле в контроллере. – OrenD

ответ

0

@ jme11 и This Answer дал мне способность проникновения в суть следующим образом я понял, как получить эту работу:

JQuery код для Facebook логики :

$("#inputParentName").val(response.name); 
    $("#inputParentEmail").val(response.email); 
    $("#inputParentBirthday").val(response.birthday); 

    angular.element(document.getElementById('inputParentName')).scope().$apply(); 
    angular.element($('#inputParentName')).scope().setName(response.name); 
    angular.element($('#inputParentEmail')).scope().setEmail(response.email); 
    angular.element($('#inputParentBirthday')).scope().setBirthday(response.birthday); 

Мой код контроллера:

$scope.setName = function (val) { 
    addParentService.inputParentName = val; 
} 

$scope.setEmail = function (val) { 
    addParentService.inputParentEmail = val; 
} 

$scope.setBirthday = function (val) { 
    addParentService.inputParentBirthday = val; 
} 

Service Code:

vm.addParent = function() { 
    alert(vm.inputParentName); 
    alert(vm.inputParentBirthday); 
    alert(vm.inputParentEmail); 
    alert(vm.inputParentCellPhone); 
    alert(vm.inputParentCarrier); 
}; 

Теперь, когда я добавляю мой Родитель значение предварительно заполненное от Facebook может использоваться в моем коде службы.

Снова - благодаря jme11 за помощь в решении этого вопроса.

1

Если вы хотите, чтобы начальное значение было «чем-то», когда отображается представление, вы можете (технически) использовать ng-init, хотя docs прямо заявляют нам НЕ делать это.

Единственное правильное использование ngInit для наложения специальных свойств из ngRepeat, как показано на рисунке демо. Кроме этого случая, вы должны использовать контроллеры, а не ngInit, чтобы инициализировать значения в области.

Но если вы просто хотите проверить что-то, нг-INIT будет выглядеть следующим образом:

<input ng-model="test.val" ng-init="test.val='something'" /> 

Предпочтительный способ хотя бы добавить значение в контроллер $ объема.

<input ng-model="test.val" /> 

Тогда в контроллере:

myapp.controller('MyCtrl', function ($scope) { 

    $scope.test = { 
    val: 'something' 
    } 

}); 
+0

Я понял это немного по-другому, но все же с большим количеством вашего ввода. Если вы хотите принять, как я это сделал, и добавить к нему ответ, я помету ваш в качестве ответа (и удалю мой). – webdad3

+0

Рад, что у вас есть решение. Сохраните свой ответ. Хотите вызов? Избавьтесь от зависимости от jQuery. Создайте свой собственный сервис для Facebook, используя встроенную службу $ http и заполните ваши значения в своей области с вашего сервиса! – jme11

+0

Это моя следующая задача с AngularJS. Должен ли я просто искать сервисы $ http? – webdad3

Смежные вопросы