#javascript #html #angularjs
#javascript #HTML #angularjs
Вопрос:
Итак, я использую ngRoute для загрузки различных частичных HTML-файлов в мой index.html досье. Директива ng-view загружает первую частичную (search.html ), и когда я нажимаю на ссылку в этой части, она загружает вторую часть (details.html ). Щелчок по ссылке эффективно вызывает вызов (через контроллер) к API OMDB для получения сведений о конкретном фильме и устанавливает $scope.movieJson = response . Когда я пытаюсь получить доступ к этому в моем details.html частичный, он не распознает его.
index.html
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="AppCtrl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Movie List - Home</title>
</br>
</br>
<div class="container">
<img class="" src="http://www.movie-list.com/images/logo.png" display="block" margin="auto" width="25%">
</div>
</br>
</br>
</head>
<body>
<div class='container'>
<input class="form-control searchBox" ng-show="show" type="text" name="searchBox" ng-model="movies" ng-change="getMovies()" placeholder="Enter your movie search">
</br>
<a href="#/" ng-click="reloadPage()" ng-hide="hide"><h3>Search Again</h3></a>
<div data.ng-view></div>
<ng-view></ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="controllers/controller.js"></script>
<script src="js/config.js"></script>
<script src="js/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
</body>
</html> controller.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('AppCtrl', function($scope, $routeParams, $http) {
$scope.show = true;
$scope.hide = true;
$scope.getMovies = function() {
console.log("Get movies requested in controller");
$http.get("http://www.omdbapi.com/?s=" $scope.movies "amp;y=amp;plot=fullamp;r=json").success(function(response) {
console.log("Get movies requested in controller");
console.log($scope.movies);
console.log(response);
$scope.moviesJson = response;
});
};
$scope.getMovie = function(Title, err) {
console.log(Title);
$http.get("http://www.omdbapi.com/?t=" Title "amp;y=amp;plot=fullamp;r=json").success(function(response) {
console.log("Get single movie requested in controller");
console.log(response);
$scope.movieJson = response;
window.scrollTo(0, 0);
});
$scope.show = false;
$scope.hide = false;
};
$scope.reloadPage = function() {
window.location.reload();
};
}); config.js
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/search.html',
controller : 'AppCtrl'
})
.when('/details', {
templateUrl : 'partials/details.html',
controller : 'AppCtrl'
})
.otherwise(
{
templateUrl : '<div>No Page</div>'
});
}); search.html
<div class="container" ng-controller="AppCtrl">
<div class="row" vertical-align: middle ng-show="show">
<div class="col-md-10 col-xs-10 col-lg-10">
<div data-ng-repeat="movie in moviesJson.Search" class="col-md-4 col-xs-4 col-lg-4">
<h4><a href="#/details" ng-click="getMovie(movie.Title)">{{movie.Title}}</a></h4>
<a href="#/details" ng-click="getMovie(movie.Title)" ng-style="{ width : 50px, height : 50px }"><img class="img-responsive" ng-src="{{ movie.Poster || 'https://www.myuniverse.co.in/ABMUPictureLibrary/NoImage.jpg' }}"></a>
</div>
</div>
</div>
</div> details.html
<div class="container" ng-controller="AppCtrl">
<div class="col-md-10 col-xs-10 col-lg-10">
<table class="table" border="1">
<thead>
</thead>
<tbody>
<tr><h4><strong>Title:</strong> {{movieJson.Title}}</h4></tr>
<tr><h4><strong>Year:</strong> {{movieJson.Year}}</h4></tr>
<tr><h4><strong>Rated:</strong> {{movieJson.Rated}}</h4></tr>
<tr><h4><strong>Released:</strong> {{movieJson.Released}}</h4></tr>
<tr><h4><strong>Runtime:</strong> {{movieJson.Runtime}}</h4></tr>
<tr><h4><strong>Genre:</strong> {{movieJson.Genre}}</h4></tr>
<tr><h4><strong>Director:</strong> {{movieJson.Director}}</h4></tr>
<tr><h4><strong>Writer:</strong> {{movieJson.Writer}}</h4></tr>
<tr><h4><strong>Actors:</strong> {{movieJson.Actors}}</h4></tr>
<tr><h4><strong>Plot:</strong> {{movieJson.Plot}}</h4></tr>
<tr><h4><strong>Language:</strong> {{movieJson.Language}}</h4></tr>
<tr><h4><strong>Country:</strong> {{movieJson.Country}}</h4></tr>
<tr><h4><strong>Awards:</strong> {{movieJson.Awards}}</h4></tr>
<tr><h4><strong>Metascore:</strong> {{movieJson.Metascore}}</h4></tr>
<tr><h4><strong>IMDB Rating:</strong> {{movieJson.imdbRating}}</h4></tr>
<tr><h4><strong>IMDB Votes:</strong> {{movieJson.imdbVotes}}</h4></tr>
<tr><h4><strong>IMDB ID:</strong> {{movieJson.imdbID}}</h4></tr>
</tbody>
</table>
</div>
</div> app.js
window.addEventListener('hashchange', function() {
console.log("Worked");
}); server.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.use(express.static(__dirname = 'public'));
app.use(bodyParser.json());
app.get('', function (req, res) {
console.log(req.body);
res.json();
});
app.post('', function(req, res) {
console.log(req.body);
res.json(doc);
});
app.listen(3001);
console.log("Server running on port 3001"); Комментарии:
1. Нажатие на ссылку вызывает асинхронный HTTP GET и загружает details.html — да? Кажется, нет никакой гарантии, что HTTP GET вернется раньше details.html загружается. Если это так, это объяснило бы ваши симптомы.
$scope.movieJsonне существует.
Ответ №1:
Избавиться от ng-controller="AppCtrl"
Вы фактически создаете 3 разных экземпляра, каждый со своей собственной областью.
Первый создается маршрутом, затем у вас есть 2 вложенных экземпляра внутри этого
Комментарии:
1. Попробовал то, что вы сказали, и все осталось по-прежнему.
2. Просто чтобы уточнить, удалите ng-controller=»AppCtrl» из 2 частей и оставьте его в index.html ?
3. Я даже не заметил этого там… тогда у вас есть 4 отдельных экземпляра. Предложите вам создать по одному контроллеру на маршрут и использовать для них конфигурацию маршрутизации. Тогда они будут нести ответственность за то, что находится внутри ng-view. Также, возможно, стоит ознакомиться с руководством на сайте документации