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
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.