作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有 2 个 html 页面和一个 app.js
我的 search-movie.html 代码如下:
<!DOCTYPE html>
<html ng-app="adphorusWork">
<head lang="en">
<meta charset="UTF-8">
<title>Search Movie</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="app/app.js"></script>
</head>
<body ng-controller="searchMovieController">
<div class="navbar navbar-default navbar-fixed-top" style="margin-top: 20px;">
<div class="container-fluid">
<ul>
<li>
<a href="http://www.omdbapi.com/">OMDb Api</a>
</li>
</ul>
</div>
</div>
<div class="container" style="margin-top: 50px;">
<div class="bs-docs-section" id="">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h2><a href="https://github.com/Cakmakk">My Github</a></h2>
</div>
<div class="bs-component">
<form class="well form-search" id="search-movie" onsubmit="return false;">
<fieldset>
<legend>Search Movie</legend>
</fieldset>
<div>
<label class="control-label" for="movie-name">Movie Name : </label>
<input type="text" id="movie-name" class="input-small" style="margin-left: 10px;">
<button id="btn-search-movie" type="button" class="btn-sm btn-primary" style="margin-left: 10px;" ng-click="searchMovie()">
<span class="glyphicon glyphicon-search"> Search</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
和我的 result-movie.html 代码如下:
<!DOCTYPE html>
<html>
<head ng-app="adphorusWork">
<meta charset="UTF-8">
<title>Search Movie</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
</head>
<body ng-controller="resultMovieController">
<div class="navbar navbar-default navbar-fixed-top" style="margin-top: 20px;">
<div class="container-fluid">
<ul>
<li>
<a href="http://www.omdbapi.com/">OMDb Api</a>
</li>
</ul>
</div>
</div>
<div class="container" style="margin-top: 50px;">
<div class="bs-docs-section" id="">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h2><a href="https://github.com/Cakmakk">My Github</a></h2>
</div>
<div class="bs-component">
<fieldset>
<legend>Result for Search Movie</legend>
</fieldset>
<div>
<button id="btn-result-movie" type="button" class="btn-sm btn-primary" style="margin-top: 40px;" ng-click="backtohome()">
<span class="glyphicon glyphicon-circle-arrow-left"> Home</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
和我的 app.js 如下:
(function (angular) {
'use strict';
var app = angular.module('adphorusWork', []);
app.controller('searchMovieController', function ($scope) {
$scope.searchMovie = function () {
alert("come")
}
});
app.controller('resultMovieController', function ($scope) {
$scope.backtohome = function () {
alert("home")
}
});
})(angular);
我的搜索按钮有效(在 search-movie.html 中)但我的“主页”按钮无效(在 result-movie.html 中)
我在两个 html 页面中使用相同的 ng-app。我想在其他按钮上工作(所以主页按钮)
我哪里做错了?或如何修复此错误?
最佳答案
你需要为此使用 Angular Ui 路由器。 @Lex 是正确的,您没有遵循 Angular SPA 框架。
这是一本好书:https://github.com/angular-ui/ui-router
此链接可以提供有关 Angular UI 路由器的简要详细信息 https://scotch.io/tutorials/angular-routing-using-ui-router
关于javascript - 如何对 2 个不同的 html 页面使用相同的 ng-app?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38254416/
我是一名优秀的程序员,十分优秀!