Question

所以我使用ngRoute将不同的部分html文件加载到我的index.html文件中。 ng-view指令加载第一个部分（search.html），当我单击该部分中的链接时，它会加载第二个部分（details.html）。链接点击有效地（通过控制器）调用OMDB API以检索特定电影的详细信息并设置$ 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+"&y=&plot=full&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+"&y=&plot=full&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");

End result

Answer 1

摆脱ng-controller="AppCtrl"

您实际上是在创建3个不同的实例，每个实例都有自己的范围。

第一个是由路径创建的，然后在那个

中有2个嵌套实例

无法将范围对象传递给partial

1 个答案: