На этом шаге вы сделаете изображение мобильного телефона на странице сведений о мобильном телефоне.
Пожалуйста, сбросьте рабочий каталог:
GIT Checkout -f Step -10
Вид на мобильном телефоне показывает большую картину текущего телефона, а также несколько меньших миниатюр. Было бы еще лучше, если бы пользователь нажимал на миниатюру и может заменить большой самой. Теперь давайте посмотрим, как реализовать его с помощью AngularJS.
Наиболее важные различия между шагом 9 и шагом 10 перечислены ниже. Вы можете увидеть полную разницу в GitHub.
Контроллер
app/js/controllers.js
... функция phnedetailCtrl ($ scope, $ routeparams, $ http) {$ http.get ('телефоны/' + $ routeparams.phoneId + '.json'). Успех (function (data) {$ scope.phone = data; $ scope.mainimageurl = data.images [0]; $ scope.setimage = function (imageurl) {$ scope.mainimageurl = imageurl; }} // phnedetailctrl. $ Inject = ['$ scope', '$ routeparams', '$ http'];В контроллере PhnedetailCtrl мы создаем свойство модели 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 -адрес выбранной миниатюры.
тест
Чтобы проверить эту новую функцию, мы добавили два сквозных теста. Основное изображение проверки установлено на первое мобильное изображение по умолчанию. Второй тест нажимает на несколько миниатюр и проверяет, что основное изображение меняется разумно.
тест/e2e/scenarios.js
... описать ('view thefice detail', function () {... it ('должен отображать первое изображение телефона как основное изображение телефона', function () {wearm (element ('img.phone'). attr ('src')). tobe ('img/телефоны/nexus-s.0.jpg');}); It ('wry swap main image, если на сфере, на кликке, функции, функция, функция. element ('. Телефон Li: nth-Child (3) img'). Click (); weard (element ('img.phone'). attr ('src')). }); });Теперь вы можете освежить свой браузер и снова запустить сквозное тест, или вы можете запустить его на сервере AngularJS.
упражняться
Добавьте новый метод контроллера в PhnedetailCtrl:
$ scope.hello = function (name) {alert ('hello' + (имя || 'world') + '!'); }И добавить:
<Кнопка ng-click = "hello ('elmo')"> Hello </button>
Перейдите в шаблон телефона-details.html.
Суммировать
Теперь, когда браузер изображений готов, мы готовы к шагу 11 (последний шаг!), Мы научимся получать данные более элегантно.
Выше приведено информация, отсортированная из процессора событий AngularJS. Мы продолжим добавлять его позже. Спасибо за поддержку этого сайта!