ng-switch および ng-bind と組み合わせて使用される ng-repeat ループがあります (ここでは ng-switch は問題ではないと思います)。
<div ng-repeat="message in messages track by message.id">
<div ng-switch="message.yesno">
<div ng-switch-when="true">
text 1
</div>
<div class="click-me" element_id = "{{message.id}}" ng-switch-when="false" ng-bind="message.texts[message.active_text]">
</div>
</div>
</div>
メッセージは、次の構造を持つオブジェクトの配列として定義されます。
{
id: int,
yesno: boolean,
texts: array, // containing N strings
active_text: int // index of the current displayed string
}
セッターメソッド(オブジェクトを返す同じ関数内にあります。この関数がオブジェクトコンストラクターであるとしましょう)に加えて
this.setNextText = function(){
this.active_text= (++this.active_text)%(this.texts.length);
}
メッセージ オブジェクトの yesno プロパティが false の場合、ユーザーはテキストをクリックして、次に使用可能なテキストに変更できます (配列の境界に到達すると、元のテキストに戻ります)。
そのため、ユーザーがテキストをクリックすると、次のイベントがトリガーされます。
$(document).on("click",".click-me",function(){
var message_id = $(this).getAttribute("element_id");
$.grep($scope.messages, function(e){ return e.id == message_id; })[0].setNextText(); // obj containing the message
});
基本的に:
- クリックされたメッセージのインデックスを取得します (現在の ng-repeat ループのインデックスに対応)
- それを増やす
このように、nd-bind はmessage.textsで利用可能な次のテキストをバインドする必要があります。しかし、そうではありません。
私はそれを確信しています:
- ng-bind: 正しく設定されている (message.texts の最初の要素が正しく出力されている)
- message.active_text が正しく更新されました
また、私は使用しようとしました:
$scope.apply();
しかし、エラーも発生します(通常は機能します):
キャッチされていない TypeError: $scope.apply は関数ではありません
どんな手掛かり?