javascript - 无法将作用域对象传递给部分对象-6ren

javascript - 无法将作用域对象传递给部分对象

转载作者：行者123 更新时间：2023-11-28 05:27:20

所以我使用 ngRoute 将不同的部分 html 文件加载到我的 index.html 文件中。 ng-view 指令加载第一个部分(search.html)，当我单击该部分中的链接时，它加载第二个部分(details.html)。链接单击有效地调用(通过 Controller )OMDB API 以检索特定电影的详细信息并设置 $scope.movieJson = response。当我尝试在详细信息.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>'
	});
});

搜索.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>

详细信息.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");
});

服务器.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

最佳答案

摆脱ng-controller="AppCtrl"

您实际上正在创建 3 个不同的实例，每个实例都有自己的作用域。

第一个是由路由创建的，然后在其中有 2 个嵌套实例

关于javascript - 无法将作用域对象传递给部分对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40032069/

文章推荐： javascript - 带有透明字母的 SVG 背景以查看其他内容

文章推荐： javascript - 抓取子节点时抓取复合节点 cytoscape.js

文章推荐： javascript - Angular Material 对话框表单用 $resource 保存

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

javascript - 无法将作用域对象传递给部分对象