1. Zuhause
  2. Frage und Antwort
  3. Wie Funktion in Controller von einem anderen Controller aufrufen?

Wie Funktion in Controller von einem anderen Controller aufrufen?

2016-07-11 11 views
0

Ich habe 3 HTML-Seite. index.html, search-movie.html und result-movie html. Ich binWie Funktion in Controller von einem anderen Controller aufrufen?

Umleitung Seiten mit UI-Router.

search-movie.html Code ist wie folgt:

Ich habe Text und Button in der HTML-Seite.

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Search Movie</title> 
</head> 
<body> 
    <div class="bs-component" ng-controller="searchMovieController"> 
     <form class="well form-search"> 
      <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;" placeholder="Please write movie name" ng-model="searchMovie"> 

       <a ui-sref="/result-movie" class="btn-sm btn-primary" style="margin-left: 10px;" ng-click="searchMovieF()"> 
        <span class="glyphicon glyphicon-search"> Search</span> 
       </a> 
      </div> 
     </form> 
     <ul> 
      <li> <h2>Title: {{name}}</h2></li> 
      <li><h3>Release Date: {{release}}</h3></li> 
      <li><h3>Length: {{length}}</h3></li> 
      <li><h3>Description: {{description}}</h3></li> 
      <li><h3>IMDb Rating: {{rating}}</h3></li> 
     </ul> 
    </div>    
</body> 
</html>

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

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Result Movie</title> 
</head> 
<body> 
    <div id="forResult" class="bs-component" ng-controller="resultMovieController"> 
     <form class="well form-search" id="formResult"> 
      <fieldset> 
       <legend>Result for Search Movie</legend> 
      </fieldset> 
     </form> 
     <ul> 
      <li> <h2>Title: {{name}}</h2></li> 
      <li><h3>Release Date: {{release}}</h3></li> 
      <li><h3>Length: {{length}}</h3></li> 
      <li><h3>Description:{{description}}</h3></li> 
      <li><h3>IMDb Rating: {{rating}}</h3></li> 
     </ul> 
     <a ui-sref="/search-movie" class="btn-sm btn-primary" style="margin-left:20px;"> 
      <span class="glyphicon glyphicon-circle-arrow-left">Back to Search Page</span> 
     </a> 
    </div>    
</body> 
</html>

meine app.js wie folgt hinzu:

(function (angular) { 
    'use strict'; 

    var app = angular.module('adphorusWork', ['ui.router']); 

    app.config(function ($stateProvider, $urlRouterProvider) { 
     $stateProvider 
     .state('/', { 
      url: '/', 
      templateUrl: 'welcome.html' 
     }) 
     .state('/search-movie', { 
       url: '/search-movie', 
       templateUrl: 'search-movie.html', 
       controller: 'searchMovieController' 
     }) 
     .state('/result-movie', { 
       url: '/result-movie', 
       templateUrl: 'result-movie.html', 
       controller: 'resultMovieController' 
     }); 
     $urlRouterProvider.otherwise('/search-movie'); 
    }); 

    // I have no idea hoe can I use ? (with function) 
    //app.factory('omdbService', function() { 
    // return { 
    //  omdbData: { 

    //  } 
    // }; 
    //}); 

    app.controller('searchMovieController', function ($scope, $http) { 
     $scope.searchMovieF = function() { 
      if ($scope.searchMovie.length > 0) { 
       $scope.api = 'http://www.omdbapi.com/?t=' + $scope.searchMovie + '&y=&plot=short&r=json'; 
       $http.get($scope.api) 
       .success(function (data) { 
        $("#movie-name").autocomplete({ 
         source: data.Title 
        }); 
        if ((data.Error != "Movie not found!") && (data.Error != "Must provide more than one character.")) { 
         $scope.name = data.Title; 
         $scope.release = data.Released; 
         $scope.length = data.Runtime; 
         $scope.description = data.Plot; 
         $scope.rating = data.imdbRating; 
        } 
        else { 
         alert("Movie not found !") 
        } 
       }); 
      } else { 
       alert("Please write somethings !") 
      } 
     } 
    }); 
    app.controller('resultMovieController', function ($scope) { 
    }); 
})(angular);

ich dies wollen: Wenn Ich schreibe Wert auf Text (zum Beispiel "Spiel") und klickte

Knopf (in search-movie.html), sollte ich Ergebnis zeigen (Beispiel imdb , Titel usw.) in

result-movie.html. Ich benutzte ui-router und arbeite, aber ich konnte Werte in result-movie.html nicht zeigen. Ich kann Werte auf der Suchseite anzeigen, aber das möchte ich nicht.

Kann man Controller Aufruf einer anderen oder Wie kann ich .factory verwenden ('servicethingss ..')

Quelle

2016-07-11 eagle

Antwort

1

Speicher, um das Ergebnis zu factory und verwenden Sie es in einer anderen controller

Arbeits FIDDLE

app.controller('searchMovieController', function ($scope, $http, resultFactory) { 
     $scope.searchMovieF = function() { 
      if ($scope.searchMovie.length > 0) { 
       $scope.api = 'http://www.omdbapi.com/?t=' + $scope.searchMovie + '&y=&plot=short&r=json'; 
       $http.get($scope.api) 
       .success(function (data) { 
        $("#movie-name").autocomplete({ 
         source: data.Title 
        }); 
        if ((data.Error != "Movie not found!") && (data.Error != "Must provide more than one character.")) { 
         var details = { 
          name:data.Title, 
          release: data.Released, 
          length: data.Runtime, 
          description: data.Plot, 
          rating: data.imdbRating 
         } 
         resultFactory.set(details) 

        } 
        else { 
         alert("Movie not found !") 
        } 
       }); 
      } else { 
       alert("Please write somethings !") 
      } 
     } 
    }); 
    app.controller('resultMovieController', function ($scope,resultFactory) { 
     $scope.result = function() { 
      return resultFactory.details 
     } 
    }); 


    app.factory('resultFactory', function() { 
     var details; 
     var set = function(obj) { 
      detail = obj 
     } 
     return { 
      details: details, 
      set: set 
     } 
    })

Quelle

2016-07-11 20:21:28 Arif

+0

aber nichts Show in html Seite ? @Arif – eagle

+0

@eagle, ändere deine resultthtml Seite auch statt '{{name}}' schreibe '{{result(). Name}}' wenn es nicht hilft, bitte gib mir jsfiddle das zeigt dein Problem – Arif

+0

I ' Habe den JSFiddle hinzugefügt, bitte prüfe, wie es funktionieren sollte – Arif

Verwandte Themen

 Verwandte Themen