如何对 2 个不同的 html 页面使用相同的 ng-app？

Question

我有 2 html 页和一个 app.js

我的搜索-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>

我的结果-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);

我的搜索按钮有效（在搜索中-movie.html）但我的'Home' 按钮不起作用（在结果-movie.html）

我在两个 html 页面中使用相同的 ng-app。我想在其他按钮上工作（所以主页按钮）

我哪里做错了？或如何修复此错误？

Answer 1

您没有：

<script src="app/app.js"></script>

在您的结果-movie.html 页面中。不过，更大的问题是为什么要这样构建它？ Angular 被设计为单页应用程序 (SPA) 框架。从长远来看，我认为您构建它的方式最终会遇到很多问题。

Answer 2

为此您需要使用 Angular Ui 路由器。 @Lex 是正确的，您没有遵循 angular SPA 框架。

这是一本好书：https://github.com/angular-ui/ui-router

此 link 可以提供有关 angular ui 路由器的简要详细信息 https://scotch.io/tutorials/angular-routing-using-ui-router

Answer 3

我注意到您没有包含在 result-movie.html 页面中

<script src="app/app.js"></script>

至于最好的方法是您可以使用ngRoute在控制器之间传递数据

如何对 2 个不同的 html 页面使用相同的 ng-app？

How to use same ng-app for 2 different html page?

javascript

html

angularjs

ng-controller

ng-app