How to call function in controller from another controller?

Question

I have 3 html page. index.html, search-movie.html and result-movie html. I am

redirecting pages with ui-router.

search-movie.html code is as the following :

I have text and button in the html page.

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

and this is my result-movie.html code as the following :

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

add my app.js as the following :

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

I want to this : When I write value to text (for example 'game') and clicked

button (in search-movie.html) , I should show result(example imdb,title etc.) in

result-movie.html. I used ui-router and working but I could not show values in result-movie.html. I can show values in the search page but I dont want to this.

Can one controller call another or How can I use .factory('servicethingss..')

Arif · Accepted Answer · 2016-07-11 20:48:23Z

1

Save the result to factory and use it inside another controller

Working 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
        }
    })

edited Jul 11, 2016 at 20:48

answered Jul 11, 2016 at 20:21

Arif

1,6419 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arif Over a year ago

@eagle, change your resulthtml page too instead of {{name}} write {{result().name}} if it doesnt help, please give me jsfiddle which shows your problem

Arif Over a year ago

I've added the JSFiddle, please check how it should work

Ruben Pirotte · Accepted Answer · 2016-07-11 20:20:12Z

0

Take a look at $rootScope.$broadcast and $rootScope.$on

$broadcast creates an "event" and "on" is a listener for an event. Because it is on rootscope that works over controllers.

this explains quite well and has sample code:

https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

answered Jul 11, 2016 at 20:20

Ruben Pirotte

3862 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to call function in controller from another controller?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related