getelementbyid javascript ejemplo

El modelo Ng no actualiza el valor del controlador

Question

Probablemente una pregunta tonta, pero tengo mi formulario html con entrada simple y botón:

<input type="text" ng-model="searchText" />
<button ng-click="check()">Check!</button>
{{ searchText }}

Luego en el controlador (la plantilla y el controlador se llaman desde routeProvider):

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

¿Por qué veo la vista actualizada correctamente pero no definida en la consola al hacer clic en el botón?

¡Gracias!

Actualización: Parece que realmente resolví ese problema (antes tuve que encontrar algunas soluciones): Solo tuve que cambiar el nombre de mi propiedad de searchText a search.text , y luego definir $scope.search = {}; objeto en el controlador y listo ... No tengo idea de por qué está funcionando;]

Answer 1

Acabo de tener este mismo problema con un controlador_conectado enlazado al elemento-cuerpo. Entonces estaba usando ng-view con el enrutador angular. El problema es que angular SIEMPRE crea un nuevo alcance cuando inserta el html en el elemento ng-view. Como consecuencia, mi función de "verificación" se definió en el ámbito principal del ámbito que fue modificado por mi elemento ng-model.

Para resolver el problema, solo use un controlador dedicado dentro del contenido html cargado en ruta.

Answer 2

Como nadie mencionó esto, el problema se puede resolver agregando $parent a la propiedad vinculada

<div ng-controller="LoginController">
    <input type="text" name="login" class="form-control" ng-model="$parent.ssn" ng-pattern="//d{6,8}-/d{4}|/d{10,12}/" ng-required="true" />
    <button class="button-big" type="submit" ng-click="BankLogin()" ng-disabled="!bankidForm.login.$valid">Logga in</button>
</div>

Y el controlador

app.controller("LoginController", [''$scope'', function ($scope) {
    $scope.ssn = '''';

    $scope.BankLogin = function () {
        console.log($scope.ssn); // works!
    };
}]);

Answer 3

Echa un vistazo a este violín http://jsfiddle.net/ganarajpr/MSjqL/

He hecho (¡supongo!) Hecho exactamente lo que estaba haciendo y parece estar funcionando. ¿Puedes comprobar lo que no funciona aquí para ti?

Answer 4

En Mastering Web Application Development con AngularJS libro p.19, está escrito que

Evite los enlaces directos a las propiedades del alcance. El enlace de datos bidireccional a las propiedades del objeto (expuesto en un alcance) es un enfoque preferido. Como regla general, debe tener un punto en una expresión proporcionada a la directiva ng-model (por ejemplo, ng-model = "thing.name").

Los ámbitos son solo objetos de JavaScript e imitan la jerarquía de dominios. De acuerdo con la herencia del prototipo de JavaScript , las propiedades de los ámbitos se separan a través de los ámbitos. Para evitar esto, la notación de puntos debe usarse para enlazar ng-modelos.

Answer 5

Encontré el mismo problema al tratar con una vista no trivial (hay ámbitos anidados). Y, finalmente, descubrí que esto es algo conocido cuando se desarrolla la aplicación AngularJS debido a la naturaleza de la herencia basada en prototipos de java-script. Los ámbitos anidados de AngularJS se crean a través de este mecanismo. Y el valor creado a partir de ng-model se coloca en el alcance secundario, sin decir que el alcance primario (tal vez el que se inyecta en el controlador) no verá el valor, el valor también ocultará cualquier propiedad con el mismo nombre definido en el alcance primario si no se usa el punto Para hacer cumplir un prototipo de acceso de referencia. Para obtener más detalles, consulte el video en línea específico para ilustrar este problema, http://egghead.io/video/angularjs-the-dot/ y los comentarios que lo siguen.

Answer 6

Estaba enfrentando el mismo problema ... La resolución que funcionó para mí es usar esta palabra clave ..........

alerta (this.ModelName);

Answer 7

Para mí, el problema se resolvió almacenando mis datos en un objeto (aquí "datos").

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''
   }
   

});

Espero que ayude

Answer 8

Puede hacer eso para habilitar la búsqueda en ng-keypress ng-click enter para el texto de entrada y en ng-click para el icono:

<input type="text" ng-model="searchText" ng-keypress="keyEnter(this,$event)" />
<button ng-click="check(searchText)">Check!</button>

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);
        }
    }

Answer 9

Tuve el mismo problema y fue debido a que no declaré el objeto en blanco primero en la parte superior de mi controlador:

$scope.model = {}

<input ng-model="model.firstProperty">

Espero que esto funcione para ti!

Answer 10

Usar this lugar de $scope funciona.

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  <div ng-controller="AppCtrl">
    <input ng-model="searchText"/>
    <button ng-click="check()">Write console log</button>
  </div>
</div>

Edit: Al momento de escribir esta respuesta, tenía una situación mucho más complicada que esta. Después de los comentarios, traté de reproducirlo para entender por qué funciona, pero no tuve suerte. Creo que de alguna manera (no sé realmente por qué) se genera un nuevo ámbito hijo y this refiere a ese ámbito. Pero si se usa $scope , en realidad se refiere al ámbito $ parent debido a la función de alcance léxico de javascript.

Sería genial si alguien que tiene este problema pruebe de esta manera y nos informe.

Answer 11

Yo tuve el mismo problema.
La forma correcta sería configurar el ''searchText'' para que sea una propiedad dentro de un objeto.

Pero ¿y si quiero dejarlo como está, una cadena? Bueno, probé todos los métodos mencionados aquí, nada funcionó.
Pero luego noté que el problema está solo en la iniciación, por lo que acabo de establecer el atributo de valor y funcionó.

<input type="text" ng-model="searchText" value={{searchText}} />

De esta manera, el valor solo se establece en el valor ''$ scope.searchText'' y se actualiza cuando cambia el valor de entrada.

Sé que es una solución, pero funcionó para mí ..

Answer 12

"Si usas ng-model, tienes que tener un punto allí".
Haz que tu modelo apunte a un objeto. Propiedad y estarás listo.

Controlador

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

Modelo

<input ng-model="formData.searchText"/>
<button ng-click="check()">Check!</button>

Esto sucede cuando los ámbitos secundarios están en juego, como rutas secundarias o ng-repeticiones. El ámbito hijo crea su propio valor y un conflicto de nombre nace como se ilustra aquí :

Vea este video clip para más información: https://www.youtube.com/watch?v=SBwoFkRjZvE&t=3m15s

Answer 13

Controlador como versión (recomendado)

Aqui la plantilla

<div ng-app="example" ng-controller="myController as $ctrl">
    <input type="text" ng-model="$ctrl.searchText" />
    <button ng-click="$ctrl.check()">Check!</button>
    {{ $ctrl.searchText }}
</div>

El js

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

Un ejemplo: http://codepen.io/Damax/pen/rjawoO

Lo mejor será usar componente con Angular 2.xo Angular 1.5 o superior

########

Camino antiguo (NO recomendado)

Esto NO se recomienda porque una cadena es un elemento primitivo, altamente recomendado para usar un objeto en su lugar

Prueba esto en tu marca

<input type="text" ng-model="searchText" />
<button ng-click="check(searchText)">Check!</button>
{{ searchText }}

y esto en tu control

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