настроить ng-src из маршрутизации для отображения изображения в другом месте - PullRequest
Новая
       41

настроить ng-src из маршрутизации для отображения изображения в другом месте

0 голосов
/ 09 ноября 2018

Во-первых, у меня хорошо настроены ng-route и ng-view ведет себя хорошо. я хочу иметь изображение заголовка, которое будет меняться при выборе навигационного меню, и изменять вид внизу страницы с помощью ng-view.

код, размещенный ниже, является частью работы, но довольно подробным. Я надеюсь, что кто-то с проницательным взглядом может сразу представить мою проблему.

Мне нужен div с img ng-src, чтобы показать изображение на основе контроллера маршрута для каждой опции меню.

Если это невозможно, есть ли другой способ ?? 

var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider

  .when('/', {
    templateUrl : 'home.html',
    controller  : 'HomeController'
  })

  .when('/book', {
    templateUrl : 'book.html',
    controller  : 'BookController'
  })

  .when('/sails', {
    templateUrl : 'sails.html',
    controller  : 'SailsController'
  })

  .when('/contact', {
    templateUrl : 'contact.html',
    controller  : 'ContactController'
  })

  .otherwise({redirectTo: '/'});
});

app.controller('HomeController', function($scope) {
  
  var image = {
    image: "img/img/seagate photo shoot--19.jpg"
  };

  $scope.image = image;
});
<div class="container">
        <a class="navbar-brand" href="#"><img src="img/Seagate Logo RGB.png" width="200px" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#/">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/book">Book Now</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/sails">Dining</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/contact">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link desk" href="https://www.facebook.com/Seagate-Motel-Moonta-Bay-656235891127047" >
                <img src="img/flogo.png" width="25px" alt="facebook" align="middle">
              </a>
              <a class="nav-link mobile" href="fb://page/Seagate-Motel-Moonta-Bay-656235891127047" >
                <img src="img/flogo.png" width="25px" alt="facebook" align="middle">
              </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://www.instagram.com/accounts/login/?hl=en" >
                  <img src="img/Instagram.png" width="25px" alt="Instagram" align="middle">
                </a>
              </li>
          </ul>
        </div>
      </div>
    </nav>

    <header>
      <div class="headerimg">
        <img ng-src="{{image.image}}" alt="">
      </div>
    </header>

    <section class="py-5">
        <div class="container">
            <div ng-view></div>
        </div>
    </section>

Буду признателен за любую помощь

...