webentwicklung-frage-antwort-db.com.de

Ng-Klick funktioniert nicht in Ng-Repeat

Ng-Klick funktioniert nicht von Ng-Repeat. Draußen klappt es ... Ich habe hier eine Geige gesetzt

<div ng-controller="MyCtrl">
 <a ng-click="triggerTitle='This works!'">test</a>
    <h5>Please select trigger event: [{{triggerEvent}}] {{triggerTitle}}</h5>
       <ul class="dropdown-menu">
         <li ng-repeat="e in events">
             <a ng-click="triggerTitle=e.name; triggerEvent = e.action;">{{e.action}} - {{e.name}}</a>
         </li>
       </ul>
</div>
26
Alexandru Rada

Wie bereits erwähnt, erstellt ng-repeat für jedes Element in der Schleife einen untergeordneten Bereich. Die untergeordneten Bereiche haben durch prototypische Vererbung Zugriff auf die Variablen und Methoden des übergeordneten Bereichs. Der verwirrende Teil ist, wenn Sie eine Zuweisung vornehmen, eine neue Variable zum untergeordneten Bereich hinzugefügt wird, anstatt die Eigenschaft für den übergeordneten Bereich zu aktualisieren. Wenn Sie in ng-click einen Zuweisungsaufruf tiggerTitle =e.name ausführen, fügt er dem untergeordneten Bereich tatsächlich eine neue Variable mit dem Namen triggerTitle hinzu. Die AngularJS-Dokumente erklären dies gut in dem Abschnitt mit dem Namen JavaScript Prototypal Inheritance .

Wie können Sie das umgehen und die Modellvariable richtig einstellen? 

Eine schnelle und schmutzige Lösung ist, auf den übergeordneten Bereich mit $parent zuzugreifen.

<a ng:click="$parent.triggerTitle=e.name; $parent.triggerEvent = e.action;">...

Klicken Sie hier, um eine funktionierende Version Ihrer Fiddle mit der $ parent-Lösung anzuzeigen.

Die Verwendung von $parent kann Probleme verursachen, wenn Sie mit verschachtelten Vorlagen oder verschachtelten Wiederholungen arbeiten. Eine bessere Lösung kann darin bestehen, eine Funktion zum Controller-Bereich hinzuzufügen, die einen Verweis auf den Controller-Bereich zurückgibt. Wie bereits erwähnt, haben die untergeordneten Bereiche Zugriff auf die übergeordneten Funktionen und können somit auf den Bereich des Controllers verweisen. 

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

<a ng-click="getMyCtrlScope().triggerTitle=e.name;getMyCtrlScope().triggerEvent = ...

Klicken Sie hier, um eine funktionierende Version Ihrer Fiddle mit der besseren Methode anzuzeigen.

51
James Lawruk

Weil ng-repeat einen neuen Bereich erstellt.

Dies wurde bereits mehrfach beantwortet, da die Nuancen etwas schwer zu verstehen sind, insbesondere wenn Sie nicht alles über die prototypische Vererbung von js wissen: https://github.com/angular/angular.js/wiki/Understanding- Bereiche

EDIT: Es scheint, dass diese Antwort sehr umstritten ist. Nur um klar zu sein - so funktioniert JS. Sie sollten wirklich nicht versuchen, Angular zu lernen, bevor Sie verstehen, wie JS funktioniert ... __ Der Link scheint jedoch zu fehlen 

Hier ein Beispiel, wie JS in diesem Fall funktioniert:

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!

Wie können wir das umgehen?

Nun, wir können uns "zwingen", die Vererbungskette zu durchlaufen - und so können wir sicher sein, dass wir immer auf das richtige Objekt zugreifen, egal ob auf den Wert zugegriffen oder es geändert wird.

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
14
Ven

An Stelle von:

<li ng-repeat="e in events">
  <a ng-click="triggerTitle=e.name; triggerEvent = e.action;">{{e.action}} {{e.name}}</a>
</li>

Mach einfach das:

<li ng-repeat="e in events">
  <a ng-click="$parent.triggerTitle=e.name; $parent.triggerEvent = e.action;">{{e.action}} {{e.name}}</a>
</li>

ng-repeat erstellt einen neuen Bereich. Mit $parent können Sie vom ng-repeat-Block aus auf den übergeordneten Bereich zugreifen.

6
Iain Collins

Hier können wir $ parent verwenden, um auf den Code außerhalb des ng-repeat zugreifen zu können.

HTML Quelltext

<div ng-controller="MyCtrl">
        <a ng-click="triggerTitle='This works!'">test</a>


        <h5>Please select trigger event: [{{triggerEvent}}] {{triggerTitle}}</h5>
<br /> <br />
          <ul class="dropdown-menu">
            <li ng-repeat="e in events">
                <a ng-click="$parent.triggerTitle=e.name; $parent.triggerEvent = e.action;">{{e.action}} - {{e.name}}</a>
            </li>
          </ul>

Winkeliger Js-Code 

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

}

sie können es hier testen http://jsfiddle.net/xVZEX/96/

3
Harpreet Singh

Das funktioniert 

<body ng-app="demo" ng-controller="MainCtrl">
 <ul>
    <li ng-repeat="action in actions" ng-click="action.action()">{{action.name}}</li>
 </ul>

 <script>
  angular.module('demo', ['ngRoute']);

  var demo = angular.module('demo').controller('MainCtrl', function ($scope) {
  $scope.actions = [
    { action: function () {
        $scope.testabc();
      }, name: 'foo'
    },
    { action: function () {
        $scope.testxyz();
      }, name: 'bar'
    }
  ];

  $scope.testabc = function(){
    alert("ABC");
  };

  $scope.testxyz = function(){
    alert("XYZ");
  };

 });
</script>
</body>
1
Uday Gowda

Ich surfte so lange im Internet und suchte nach einer Antwort auf das Problem, dass ng-repeat seinen eigenen Bereich darin erstellt. Wenn Sie eine Variable in ng-repeat ändern, werden die Ansichten nicht überall im Dokument aktualisiert. 

Und schließlich war die Lösung, die ich fand, ein Wort, und niemand sagt Ihnen das.

Es ist ein Elternteil. vor dem Variablennamen und es ändert seinen Wert im globalen Bereich.

So 

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

0
Rohan Hussain

benutze das

<div ng:controller="MyCtrl">
 <a ng:click="triggerTitle='This works!'">test</a>
    <h5>Please select trigger event: [{{triggerEvent}}] {{triggerTitle}}</h5>
       <ul class="dropdown-menu">
         <li ng:repeat="e in events">
             <a ng:click="triggerTitle=e.name; triggerEvent = e.action;">{{e.action}} -     {{e.name}}</a>
         </li>
       </ul>
</div>

Ich konvertierte ng-click zu ng: click und es fing an zu arbeiten. Ich bin noch nicht auf der Suche nach dem Grund.

0
Hitesh Joshi

Verwenden Sie Controller mit dem Schlüsselwort 'as'.

Überprüfen Sie die Dokumentation on anglejs der Controller.

Für die obige Frage:

<div ng-controller="MyCtrl as myCntrl">
 <a ng-click="myCntrl.triggerTitle='This works!'">test</a>
    <h5>Please select trigger event: [{{myCntrl.triggerEvent}}] {{myCntrl.triggerTitle}}</h5>
       <ul class="dropdown-menu">
         <li ng-repeat="e in myCntrl.events">
             <a ng-click="myCntrl.triggerTitle=e.name; myCntrl.triggerEvent = e.action;">{{e.action}} - {{e.name}}</a>
         </li>
       </ul>
</div>

Dadurch werden die Eigenschaften und Funktionen an den Controller-Bereich angehängt.

0
Gerrard8