Ng-model não atualiza o valor do controlador

Provavelmente pergunta boba, mas eu tenho meu formulário html com simples input e botão:

  {{ searchText }} 

Em seguida, no controlador (modelo e controlador são chamados de routeProvider):

 $scope.check = function () { console.log($scope.searchText); } 

Por que vejo a exibição atualizada corretamente, mas indefinida no console ao clicar no botão?

Obrigado!

Update: Parece que eu realmente resolvi esse problema (antes tinha que criar algumas soluções alternativas) com: Só tive que mudar o nome da minha propriedade de searchText para search.text , então definir vazio $scope.search = {}; object no controlador e voila … Não tenho idéia do porque está funcionando embora;]

Controlador como versão (recomendado)

Aqui o modelo

 
{{ $ctrl.searchText }}

The JS

 angular.module('example', []) .controller('myController', function() { var vm = this; vm.check = function () { console.log(vm.searchText); }; }); 

Um exemplo: http://codepen.io/Damax/pen/rjawoO

O melhor será usar componente com Angular 2.x ou Angular 1.5 ou superior

########

Caminho antigo (NÃO recomendado)

Isso NÃO é recomendado porque uma string é primitiva, altamente recomendável usar um object

Tente isso na sua marcação

   {{ searchText }} 

e isso no seu controlador

 $scope.check = function (searchText) { console.log(searchText); } 

“Se você usa ng-model, você tem que ter um ponto lá.”
Faça seu modelo apontar para uma propriedade de object e você estará pronto para ir.

Controlador

 $scope.formData = {}; $scope.check = function () { console.log($scope.formData.searchText.$modelValue); //works } 

Modelo

   

Isso acontece quando escopos de crianças estão em jogo – como rotas secundárias ou repetições de ng. O escopo filho cria seu próprio valor e um conflito de nomes nasce como ilustrado aqui :

Veja este vídeo clipe para mais: https://www.youtube.com/watch?v=SBwoFkRjZvE&t=3m15s

No livro Mastering Web Application Development com AngularJS, p.19, está escrito que

Evite ligações diretas às propriedades do escopo. A vinculação de dados bidirecional às propriedades do object (exposta em um escopo) é uma abordagem preferencial. Como regra geral, você deve ter um ponto em uma expressão fornecida para a diretiva ng-model (por exemplo, ng-model = “thing.name”).

Os escopos são apenas objects JavaScript e imitam a hierarquia de dom. De acordo com o JavaScript Prototype Inheritance , as propriedades dos escopos são separadas por meio de escopos. Para evitar isso, a notação de ponto deve ser usada para vincular ng-models.

Usando this vez de $scope funciona.

 function AppCtrl($scope){ $scope.searchText = ""; $scope.check = function () { console.log("You typed '" + this.searchText + "'"); // used 'this' instead of $scope } } 
  

Eu tive o mesmo problema e foi devido a não declarar o object em branco primeiro no topo do meu controlador:

 $scope.model = {}  

Espero que isso funcione para você!

Eu me deparei com o mesmo problema ao lidar com uma visão não trivial (há escopos nesteds). E finalmente descobri que isso é uma coisa complicada quando se está desenvolvendo o aplicativo AngularJS devido à natureza da inheritance baseada em protótipos do java-script. Os escopos nesteds AngularJS são criados por meio desse mecanismo. E o valor criado a partir do ng-model é colocado no escopo de filhos, não dizendo que o escopo pai (talvez o injetado no controlador) não verá o valor, o valor também sombreará qualquer propriedade com o mesmo nome definido no escopo pai se não usar ponto para impor um access de referência de protótipo. Para mais detalhes, confira o vídeo on-line específico para ilustrar esse problema, http://egghead.io/video/angularjs-the-dot/ e os comentários que o acompanham.

Dê uma olhada neste violino http://jsfiddle.net/ganarajpr/MSjqL/

Eu tenho (eu assumo!) Feito exatamente o que você estava fazendo e parece estar funcionando. Você pode verificar o que não está funcionando aqui para você?

Para mim, o problema foi resolvido armazenando meus dados em um object (aqui “datas”).

 NgApp.controller('MyController', function($scope) { $scope.my_title = ""; // This don't work in ng-click function called $scope.datas = { 'my_title' : "", }; $scope.doAction = function() { console.log($scope.my_title); // bad value console.log($scope.datas.my_title); // Good Value binded by'ng-model' } }); 

Como ninguém mencionou isso, o problema pode ser resolvido adicionando $parent à propriedade bound

 

E o controlador

 app.controller("LoginController", ['$scope', function ($scope) { $scope.ssn = ''; $scope.BankLogin = function () { console.log($scope.ssn); // works! }; }]); 

Acabei de ter esse problema usando um root_controller ligado ao elemento body. Então eu estava usando ng-view com o roteador angular. O problema é que o angular ALWAYS cria um novo escopo quando insere o html no elemento ng-view. Como consequência, minha function “check” foi definida no escopo pai do escopo que foi modificado pelo meu elemento ng-model.

Para resolver o problema, basta usar um controlador dedicado no conteúdo html carregado por rota.

Você pode fazer isso para ativar a pesquisa em ng-keypress enter para input de texto e em ng-click para o ícone:

   in the controller $scope.search = function (searchText) { console.log(searchText); } $scope.keyEnter = function (serachText,$event) { var keyCode = $event.which || $event.keyCode; if (keyCode === 13) {//KeyCode for Enter key console.log(searchText); } } 

Eu tive o mesmo problema.
A maneira correta seria definir o ‘searchText’ como uma propriedade dentro de um object.

Mas e se eu quiser deixar como está, uma corda? Bem, eu tentei cada método mencionado aqui, nada funcionou.
Mas então eu notei que o problema é apenas na iniciação, então eu apenas configurei o atributo value e ele funcionou.

  

Desta forma, o valor é apenas definido para o valor ‘$ scope.searchText’ e está sendo atualizado quando o valor de input é alterado.

Eu sei que é uma solução, mas funcionou para mim ..

Eu estava enfrentando o mesmo problema … A resolução que funcionou para mim é usar essa palavra-chave ……….

alerta (this.ModelName);

Intereting Posts