javascript - onclick angular 4

ng-click no toma parámetros del DOM

Question

Tengo el siguiente código:

<input id="id">
<button data-action="bea" ng-click="Create($(''#id1'')[0].value);" class="btn">Insert ID</button>
<button data-action="bea" ng-click="Create($(''#id2'')[0].value);" class="btn">Insert ID</button>

En el JS tengo:

$scope.Create = function (id){
        if (id === undefined) {
            $scope.data = "You must specify an id";
        } else {
                $scope.data = data;
                console.log(data);
            });
        }
    };

Cuando la llamada entra en la función Crear, el valor de la identificación no está definido.

Si agrego la siguiente línea al inicio de la función Crear todo funciona bien:

id = $(''#id'')[0].value;

Si envío un valor constante, funciona:

<button data-action="bea" ng-click="Create(''SomeID'');" class="btn">Insert ID</button>

¿Por qué sucede esto y cómo puedo hacerlo sin poner la línea de valor en el método?

Gracias

Answer 1

Esto es solo una extensión de los comentarios y otras respuestas. Podrías lograr esto de muchas maneras usando el método angular, un ejemplo simple podría ser:

  <!-- Add a controller -->
  <div ng-controller="MainCtrl"> 
     <!-- Give a model binding to your text input -->
     <input ng-model="userEntry" type="text"/> 
     <!-- ng-click pass which ever argument you need to pass, provided it is an expression that can be evaluated against the scope or any constants -->
     <button data-action="bea" ng-click="Create(userEntry);" class="btn">Insert ID</button>
    <!-- Some simple data binding using interpolation -->
    {{data}}
     <!-- Just for demo on repeater on a list of items on the scope -->
     <div ng-repeat="item in items track by $index">{{item}}</div>
  </div>

Ejemplo de demostración

Mis 2 centavos en la línea de lo que originalmente intentaban hacer: -

Utilice enlaces angulares en lugar de acceder a DOM directamente para obtener los datos, realmente lo ayuda a manejar solo los datos, sin preocuparse por cómo acceder o representarlos en DOM. Si cree que necesita acceder a DOM para implementar lógica empresarial, vuelva a pensar en el diseño, si realmente necesita hacerlo, hágalo en una directiva. Angular es muy testarudo en el diseño y cuando se accede a DOM.

• ng-model
• ng-binding
• controlador
• todo sobre el controlador ngmodel

Answer 2

El JavaScript que intenta pasar como parámetro de la función de creación no está disponible en el ámbito de la función Crear.

Intenta enfocarte en el elemento de otra manera.

¿Eso ayuda?

Answer 3

Supongo que $ no está vinculado a la función jQuery cuando se evalúa el valor de ng-click porque no está expuesto en el alcance angular.

Soluciones para abordar esto:

• exponer la función jQuery en el alcance en alguna parte, por ejemplo, $scope.$ = $; en un controlador.
• haga que la función Create parámetros como sugirió, con un var id = $(''#id'')[0].value; al principio
• mi favorito: evite usar jQuery. Si coloca algunos datos en el elemento #id , probablemente exista una manera más natural e idiomática AngularJS de recuperarlos que consultar el DOM (por ejemplo, un servicio angular).

En particular, si el elemento al que se dirige es un elemento <input> , entonces use la directiva ngModel para vincular el valor a una propiedad $scope que será accesible en el controlador:

<input ng-model="inputData"/>

Answer 4

Esta no es la forma en que debes hacer en AngularJS. Deberías pensar realmente en Angular si quieres usar AngularJS. Consulte esta publicación ( "Thinking in AngularJS" si tengo un fondo jQuery? )

Toda la manipulación DOM debe hacerse en la Directiva. Consulte esta página que encontré muy clara. ( http://ng-learn.org/2014/01/Dom-Manipulations/ )