2016-07-07 25 views
1

Ich habe 2 HTML-Seite und ein app.jsWie benutze ich die gleiche ng-app für 2 verschiedene html-Seiten?

meine Suche-movie.html Code wie folgt zusammen:

<!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> 

und mein Ergebnis-movie.html Code wie folgt zusammen:

<!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> 

und meine app.js wie die folgenden:

(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); 

Meine Suche Hintern auf funktioniert (in search-movie.html) aber meine 'Home' Taste funktioniert nicht (in result-movie.html)

Ich benutze die gleiche ng-app in zwei html-Seite. Ich möchte an anderen Tasten arbeiten (so Home-Taste)

Wo mache ich mich falsch? oder Wie kann ich diesen Fehler beheben?

+0

verwenden, aber ich benutze eins ng-app - nicht mehrere ng-app. @AlonEitan – eagle

+0

Zurückgezogen meine Stimme. Entschuldigung, dass –

+1

welches Routing verwendest du? Ich sehe keine ng-Ansicht oder Routing – batmaniac7

Antwort

0

Sie nicht haben:

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

in Ihrer Ergebnis-movie.html Seite. Die größere Frage ist jedoch, warum strukturierst du es so? Angular ist als Framework für eine einzelne Seitenanwendung (SPA) konzipiert. Die Art und Weise, wie Sie es bauen Ich denke, Sie werden auf lange Sicht mit vielen Fragen enden.

+0

Ich habe hinzugefügt, aber immer noch nicht funktioniert. Du hast Recht, aber ich sollte 2 verschiedene HTML-Seiten haben. Wie sonst kann ich tun? @Lex – eagle

0

Ich habe bemerkt, dass Sie nicht

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

wie in result-movie.html Seite enthalten Der beste Ansatz ist, können Sie ngRoute für Daten zwischen Controllern