このステップでは、携帯電話の詳細ページで携帯電話の写真をクリック可能にします。
作業ディレクトリをリセットしてください：
gitチェックアウト-fステップ-10
携帯電話の詳細ビューは、現在の電話の大きな写真と、いくつかの小さなサムネイルを示しています。ユーザーがサムネイルをクリックし、大きなものを自分自身に置き換えることができれば、それはさらに良いことです。次に、AngularJSでそれを実装する方法を見てみましょう。
ステップ9とステップ10の最も重要な違いを以下に示します。 GitHubの完全な違いを見ることができます。
コントローラ
App/JS/Controllers.js
... function Phonedetailctrl（$ scope、$ routeparams、$ http）{$ http.get（ 'phones/' + $ routeparams.phoneid + '.json'）。 $ scope.setimage = function（imageurl）{$ scope.mainimageurl = imageurl; }} // phonedetailctrl。$ inject = ['$ scope'、 '$ routeparams'、 '$ http'];Phonedetailctrlコントローラーでは、MainimageUrlモデルプロパティを作成し、そのデフォルト値を最初のモバイル画像のURLに設定します。
テンプレート
App/Partials/Phone-Detail.html
<img ng-src = "{{mainimageurl}}"> ... <ul> <li ng-repeat = "img in phone.images"> <img ng-src = "{{img}}" ng-click = "setimage（img）"> </li> </ul> ...大きな画像のNGSRC指令をMainimageUrlプロパティにバインドします。
同時に、ngclickプロセッサをサムネイルに登録します。ユーザーがサムネイルのいずれかをクリックすると、プロセッサはSetimageイベント処理機能を使用して、MainimageUrlプロパティを選択したサムネイルのURLに設定します。
テスト
この新機能を検証するために、2つのエンドツーエンドテストを追加しました。検証メイン画像は、デフォルトで最初のモバイル画像に設定されています。 2番目のテストでは、メイン画像が合理的に変化するいくつかのサムネイルと検証をクリックします。
test/e2e/sinarios.js
...説明（ '電話詳細ビュー'、function（）{... it（ '最初の電話画像をメインの電話画像'として表示する必要があります '、function（）{emention（' img.phone '）。要素（ '。電話li：nth-child（3）img'）。 expect（ 'img.phone'）。 }）; }）;ブラウザを更新して、エンドツーエンドテストを再度実行できるか、AngularJSサーバーで実行することができます。
練習する
Phonedetailctrlに新しいコントローラーメソッドを追加します。
$ scope.hello = function（name）{alert（ 'hello' +（name || 'world'） + '！'）; }追加：
<button ng-click = "hello（ 'elmo'）"> hello </button>
Phone-Details.htmlテンプレートに移動します。
要約します
画像ブラウザの準備が整ったので、ステップ11（最後のステップ！）の準備ができているので、よりエレガントな方法でデータを取得することを学びます。
上記は、AngularJSイベントプロセッサからソートされた情報です。後で追加し続けます。このサイトへのご支援ありがとうございます！