Question

我在Google上搜索过，但无法找到有关如何正确执行此操作的信息。似乎Google上的所有答案现已过时（使用旧版AngularJS）。

我试图在我的AngularJS模块上设置两个控制器。例如，第一个控制器正在处理$ http GET请求。第二个控制器显示成功＆＃39;或者＆＃39;错误＆＃39;信息。我希望能够从第二个控制器调用一个方法，并显示要显示的成功/错误消息。

或者我应该使用服务/工厂吗？我已经阅读了有关服务的信息，但无法弄清楚如何制作类似的工作。

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

module.controller('ApiController', ['$scope', '$http', function ($scope, $http) {
    $http.get('/api').
        success(function(data){
            // call AlertController('success')
        }).
        error(function(data){
            // call AlertController('failed')
        });
}]);

module.controller('AlertController', ['$scope', function ($scope) {
    $scope.message = {
        show_message: true,
        type: 'info',
        message: "Display message!"
    };
}]);

要么这样做，要么我想将传入的警报推送到全局对象变量，然后在显示后将其删除。

任何人都知道正确的设置方法吗？

Answer 1

好的，让我们试试这个 - 你还应该看看Injecting $scope into an angular service function()

消息服务：

module.service('MessageService', function ($timeout) {
    var messageQueue = [];
    var DISPLAY_TIME = 5000; // each message will be displayed for 5 seconds

    function startTimer() {
        $timeout(function() {
                // Remove the first message in the queue
                messageQueue.shift();
                // Start timer for next message (if there is one)
                if (messageQueue.length > 0) startTimer();
            }, DISPLAY_TIME);
    }

    function add(message) {
        messageQueue.push(message);
        // If this is the only message in the queue you need to start the timer
        if (messageQueue.length==0) startTimer();
    }

    function get() {
        if (messageQueue.length==0) return "";
        else return messageQueue[0];
    }

    return { add: add, get: get };
});

你仍然可以使用这个ApiService：

module.service('ApiService', ['$http', function ($http) {
    return {
        get: function(url) {
            return $http.get(url);
        }
    };
}]);

您的搜索控制器：

module.controller('SearchController', ['$scope', 'ApiService', 'MessageService', function ($scope, api, messages) {
    api.get('/yelp').
    success(function(data){
        messages.add('success');
    }).
    error(function(data){
        messages.add('failed');
    });
}]);

您的警报控制器：

module.controller('AlertController', ['$scope', 'MessageService', function ($scope, messages) {
    $scope.getMessage = function() { messages.get(); }
}]);

所以在你的html中你可以拥有：

<div ng-controller="AlertController">
    <div>{{ getMessage() }}</div>
</div>

Answer 2

这是你如何制作工厂

    module.factory('appService', ['$window', '$http', '$q', function(win, $http, $q) {
    return{
        backendcall: function(){
            var deferred = $q.defer();
            $http.get('/yelp').
                success(function(data){
                    deferred.resolve(data);
                }).
                error(function(data){
                    deferred.resolve(status);
                });

            return deferred.promise;
        }
    }
  }]);

你的控制器将是这样的

module.controller('AlertController', ['$scope', 'appService', function ($scope, appService) {
    appService.backendcall().then(function(response){
            $scope.message = {
            show_message: true,
            type: 'info',
            message: "Display message!"
        };  
    })

}]);

AngularJS：如何在另一个控制器中执行方法？

2 个答案: