如何从另一个控制器调用控制器中的函数？

Question

我有3个html页面。 index.html，search-movie.html和result-movie html。 我是

使用ui-router重定向页面。

search-movie.html代码如下：

我在html页面中有文本和按钮。

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

这是我的result-movie.html代码，如下所示：

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

添加我的app.js如下：

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

我要这样：当我将值写入文本（例如“游戏”）并单击

按钮（在search-movie.html中），我应该在其中显示结果（例如imdb，title等）

result-movie.html。 我使用ui-router并正常工作，但无法在result-movie.html中显示值。 我可以在搜索页面中显示值，但我不想这样做。

一个控制器可以呼叫另一个控制器还是我可以使用.factory（'servicethingss ..'）

Answer 1

将结果保存到factory并在另一个controller

工作场所

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

Answer 2

看一下$rootScope.$broadcast和$rootScope.$on

$broadcast创建一个“事件”，“ on”是一个事件的侦听器。 因为它是在rootscope上通过控制器工作的。

这解释得很好，并具有示例代码：

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

如何从另一个控制器调用控制器中的函数？

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-07-11 20:21:28

解决方案2
0 2016-07-11 20:20:12

如何从另一个控制器调用控制器中的函数？

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-07-11 20:21:28

解决方案2 0 2016-07-11 20:20:12

解决方案1
1 已采纳 2016-07-11 20:21:28

解决方案2
0 2016-07-11 20:20:12