Ng-click no funciona dentro de ng-repeat

Ng-click no funciona desde adentro ng-repeat. Afuera funciona He puesto un violín aquí

test
Please select trigger event: [{{triggerEvent}}] {{triggerTitle}}

Como Ven mencionó, ng-repeat crea un scope de niño para cada elemento en el ciclo. Los ámbitos secundarios tienen acceso a las variables y métodos del ámbito principal a través de la herencia prototípica. La parte confusa es cuando realiza una tarea, agrega una nueva variable al ámbito secundario en lugar de actualizar la propiedad en el ámbito principal. En ng-click , cuando realiza una asignación, llame a tiggerTitle =e.name , de hecho agrega una nueva variable llamada triggerTitle al ámbito hijo. Los documentos de AngularJS lo explican bien en la sección denominada Herencia Prototípica de JavaScript .

Entonces, ¿cómo se soluciona esto y se establece la variable del modelo correctamente?

Una solución rápida y sucia es acceder al scope principal usando $parent como tal.

 ... 

Haga clic para ver una versión funcional de su Fiddle utilizando la solución $ parent.

El uso de $parent puede causar problemas si se trata de plantillas anidadas o ng-repeats nesteds. Una mejor solución puede ser agregar una función al scope del controlador que devuelve una referencia al scope del controlador. Como ya se mencionó, los ámbitos secundarios tienen acceso para llamar a las funciones principales y, por lo tanto, pueden hacer referencia al scope del controlador.

 function MyCtrl($scope) { $scope.getMyCtrlScope = function() { return $scope; } ... 
		      	

Porque ng-repeat crea un nuevo scope.

Esto se ha respondido en numerosas ocasiones, porque el matiz es un poco difícil de entender, especialmente si no se conoce todo acerca de la herencia prototípica de js: https://github.com/angular/angular.js/wiki/ Understanding- Scopes

EDITAR: parece que esta respuesta es muy controvertida. Solo para ser claro, así es como funciona JS. Realmente no deberías tratar de aprender Angular antes de entender cómo funciona JS. Sin embargo, el enlace parece fallar

Entonces, aquí hay un ejemplo de cómo funciona JS en este caso:

 var a = {value: 5}; var b = Object.create(a); // create an object that has `a` as its prototype // we can access `value` through JS' the prototype chain alert(b.value); // prints 5 // however, we can't *change* that value, because assignment is always on the designated object b.value = 10; alert(b.value); // this will print 10... alert(a.value); // ... but this will print 5! 

Entonces, ¿cómo podemos evitar eso?

Bueno, podemos “obligarnos” a pasar por la cadena de herencia, y así nos aseguraremos de que siempre estemos accediendo al objeto correcto, ya sea accediendo al valor o modificándolo.

 var a = {obj: {value: 5}}; var b = Object.create(a); // create an object that has `a` as its prototype // we can access `value` through JS' the prototype chain: alert(b.obj.value); // prints 5 // and if we need to change it, // we'll just go through the prototype chain again: b.obj.value = 10; // and actually refer to the same object! alert(b.obj.value == a.obj.value); // this will print true 

En lugar de esto:

 
  • {{e.action}} {{e.name}}
  • Solo haz esto:

     
  • {{e.action}} {{e.name}}
  • ng-repeat crea un nuevo ámbito, puede usar $parent para acceder al ámbito principal desde dentro del bloque ng-repeat .

    Aquí podemos usar $ parent para que podamos acceder al código fuera de ng-repeat.

    Código HTML

     
    test
    Please select trigger event: [{{triggerEvent}}] {{triggerTitle}}


    Código Angular Js

     var myApp = angular.module('myApp',[]); function MyCtrl($scope) { $scope.triggerTitle = 'Select Event'; $scope.triggerEvent = 'x'; $scope.triggerPeriod = 'Select Period'; $scope.events = [{action:'compare', name:'Makes a policy comparison'}, {action:'purchase', name:'Makes a purchase'},{action:'addToCart', name:'Added a product to the cart'}] 

    }

    puedes probarlo aquí http://jsfiddle.net/xVZEX/96/

    Esto funciona

      
    • {{action.name}}

    utilizar esta

     
    test
    Please select trigger event: [{{triggerEvent}}] {{triggerTitle}}

    Conversé ng-clic a ng: clic y comenzó a funcionar, todavía no he encontrado el motivo, solo se publicó rápidamente para compartir.

    Navegué por Internet durante tanto tiempo buscando una respuesta al problema de ng-repeat creando su propio scope dentro de él. Cuando cambia una variable dentro de ng-repeat, las vistas no se actualizan en ningún otro lugar del documento.

    Y finalmente la solución que encontré fue una palabra, y nadie te dice eso.

    Es $ padre. antes del nombre de la variable y cambiará su valor en el ámbito global.

    Asi que

    ng-click="entryID=1"
    se convierte
    ng-click="$parent.entryID=1"

    Use los controladores con la palabra clave ‘como’.

    Verifique la documentación en angularjs en los controladores.

    Para la pregunta anterior:

     
    test
    Please select trigger event: [{{myCntrl.triggerEvent}}] {{myCntrl.triggerTitle}}

    Esto asociará las propiedades y funciones al scope del controlador.