Ng-clic non funziona all’interno di ng-repeat

Ng-clic non funziona dall’interno di ng-repeat. Fuori funziona. Ho messo un violino qui

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

Come menzionato da Ven, ng-repeat crea un ambito figlio per ogni elemento nel ciclo. Gli ambiti figlio hanno accesso alle variabili e ai metodi dell’ambito genitore tramite l’ereditarietà prototipale. La parte confusa è quando si effettua un assegnamento, aggiunge una nuova variabile all’ambito figlio anziché aggiornare la proprietà sull’ambito padre. In ng-click , quando si effettua una chiamata a assegnamento tiggerTitle =e.name , in realtà aggiunge una nuova variabile chiamata triggerTitle all’ambito figlio. I documenti di AngularJS lo spiegano bene nella sezione qui chiamata Prototypal Inheritance di JavaScript .

Quindi come ti aggiri e imposta correttamente la variabile del modello?

Una soluzione rapida e sporca consiste nell’accedere all’ambito principale utilizzando $parent così.

 ... 

Clicca per vedere una versione funzionante del tuo Fiddle usando la soluzione $ parent.

L’uso di $parent può causare problemi se si ha a che fare con modelli nidificati o ripetizioni ng annidate. Una soluzione migliore potrebbe essere quella di aggiungere una funzione all’ambito del controllore che restituisce un riferimento all’ambito del controllore. Come già accennato, gli ambiti figlio hanno accesso per chiamare le funzioni parent e quindi possono fare riferimento allo scope del controller.

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

Perché ng-repeat crea un nuovo ambito.

La risposta è stata più volte, perché la sfumatura è un po ‘difficile da capire, soprattutto se non si conosce tutto sull’eredità prototipale di js: https://github.com/angular/angular.js/wiki/Understanding-Scopes

EDIT: sembra che questa risposta sia molto controversa. Per essere chiari, ecco come funziona JS. Non dovresti davvero cercare di imparare l’Angolare prima di capire come funziona JS. Tuttavia, il collegamento sembra mancare

Quindi, ecco un esempio su come funziona JS in questo 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! 

Quindi, come possiamo aggirare questo?

Bene, possiamo “forzare” noi stessi a passare attraverso la catena dell’ereditarietà – e così saremo sicuri che stiamo sempre accedendo all’object corretto, sia che accediamo al valore sia che lo modifichiamo.

 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 

Invece di questo:

 
  • {{e.action}} {{e.name}}
  • Basta fare questo:

     
  • {{e.action}} {{e.name}}
  • ng-repeat crea un nuovo scope, puoi usare $parent per accedere allo scope gen all’interno del blocco ng-repeat .

    Qui possiamo usare $ parent in modo che possiamo accedere al codice al di fuori della ng-repeat.

    Codice html

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


    Codice Js angular

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

    }

    puoi testarlo qui http://jsfiddle.net/xVZEX/96/

    Questo funziona

      
    • {{action.name}}

    Usa questo

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

    Ho convertito ng-click in ng: click e ha iniziato a funzionare, devo ancora trovare il motivo, appena pubblicato in tempo per condividere.

    Ho navigato su Internet per così tanto tempo cercando una risposta al problema di ng-repeat creando il suo scopo all’interno di esso. Quando si modifica una variabile all’interno di ng-repeat, le viste non si aggiornano ovunque nel documento.

    E alla fine la soluzione che ho trovato era una parola e nessuno te lo dice.

    È $ genitore. prima del nome della variabile e cambierà il suo valore nell’ambito globale.

    Così

    ng-click="entryID=1"
    diventa
    ng-click="$parent.entryID=1"

    Utilizzare i controller con la parola chiave ‘as’.

    Controlla la documentazione su angularjs sui controller.

    Per la domanda di cui sopra:

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

    Questo collegherà le proprietà e le funzioni all’ambito del controller.