angularjs - ng-repeat 内で ng-click が機能しない

Question

ng-click は ng-repeat 内からは機能しません。外では動作します。ここにフィドルを置きました

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

score 52 · Accepted Answer

Venが述べたようng-repeatに、ループ内の各アイテムの子スコープを作成します。子スコープは、プロトタイプの継承を通じて、親スコープの変数とメソッドにアクセスできます。紛らわしい部分は、割り当てを行うときに、親スコープのプロパティを更新するのではなく、子スコープに新しい変数を追加することです。ではng-click、割り当て呼び出しを行うとtiggerTitle =e.name、実際にtriggerTitleは子スコープに呼び出される新しい変数が追加されます。AngularJS のドキュメントでは、 JavaScript Prototypal Inheritanceと呼ばれるセクションでこれについて詳しく説明しています。

では、どうすればこれを回避し、モデル変数を適切に設定できるのでしょうか?

簡単で汚い解決策は、その$parentように使用して親スコープにアクセスすることです。

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

クリックして、$parent ソリューションを使用した Fiddle の動作バージョンを確認してください。

$parentネストされたテンプレートまたはネストされた ng-repeat を扱っている場合、を使用すると問題が発生する可能性があります。より良い解決策は、コントローラーのスコープへの参照を返す関数をコントローラーのスコープに追加することです。すでに述べたように、子スコープは親関数を呼び出すためのアクセス権を持っているため、コントローラーのスコープを参照できます。

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

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

クリックして、より良い方法を使用して Fiddle の動作バージョンを確認します

score 12 · Accepted Answer

ng-repeat新しいスコープを作成するためです。

特にjsのプロトタイプの継承についてすべてを知らない場合、ニュアンスを理解するのが少し難しいため、これは何度も回答されています: https://github.com/angular/angular.js/wiki/Understanding-Scopes

編集：この答えは非常に物議を醸しているようです。明確にするために、これがJSの仕組みです。JS がどのように機能するかを理解する前に、Angular を学ぼうとするべきではありません。ただし、リンクが欠落しているようです

したがって、この場合の JS の動作の例を次に示します。

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!

では、どうすればそれを回避できますか?

つまり、継承チェーンを「強制的に」通過させることができます。これにより、値にアクセスする場合でも変更する場合でも、常に正しいオブジェクトにアクセスしていることを確認できます。

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

score 3 · Accepted Answer

ここで $parent を使用して、ng-repeat 外のコードにアクセスできるようにします。

HTML コード

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

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

}

ここでテストできますhttp://jsfiddle.net/xVZEX/96/

score 0 · Accepted Answer

これを使って

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

ng-click を ng:click に変換したところ、機能し始めました。理由はまだわかりませんが、すぐに共有に投稿しました。

score -1 · Accepted Answer

「as」キーワードでコントローラーを使用します。

コントローラーの angularjs に関するドキュメントを確認してください。

上記の質問について：

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

これにより、プロパティと関数がコントローラーのスコープにアタッチされます。

angularjs - ng-repeat 内で ng-click が機能しない

8 に答える 8

Related

Reference