Angular.js - making function available in other controllers

Question

I have an angular controller called SubmissionTreeController and it has update_dashboard() function which refreshes the ui every minute.

My goal is to refresh the ui on successful post request from a different controller.

How do I make this function available in other controllers?

var module = angular.module("submissionDashboard", ['ui.tree', 'ngCookies', 'ui.bootstrap',]);

module.controller("SubmissionTreeController", ["$scope", "$http", "$modal", 
function($scope, $http, $modal) {
    $scope.selected_items = {};

    var update_dashboard = function() {
        var url = Django.url('submission:active_list_ajax', {
            site : site
        });

        $http.get(url).success(function(data) {
            $scope.list = data.results;
        });
    };

    update_dashboard();
    $scope.closeTask = function(scope) {
        var modalInstance = $modal.open({
            templateUrl: 'modal_close_submission_renderer.html',
            controller: 'ModalCloseSubmissionController',
            resolve: {
                items: function () {
                    return $scope.selected_items;
                }} 
        });
    };
}]);

module.controller('ModalCloseSubmissionController', ['$scope', '$modalInstance', '$http', 'items',  function ($scope, $modalInstance, $http, items) {
    $scope.items = items;

    $scope.selected = {
        item: 1,
        text: ''
    };

    $scope.ok = function () {
        var val = $scope.selected.item;
        if (val === 1) {
            var url = Django.url('submission:close-notify', {
                site : site
            });
            $http.post(url, $scope.selected_items).success(function(data) {
                update_dashboard();
            });
        } else if (val === 2) {
            var url = Django.url('submission:close', {
                site : site
            });

            $http.post(url, $scope.selected_items).success(function(data) {
                update_dashboard();
            });
        } else if (val === 3) {
            var url = Django.url('submission:cancel', {
                site : site
            });

            $http.post(url, $scope.selected_items).success(function(data) {
                update_dashboard();
            });
        };

        $modalInstance.close($scope.selected.item);
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}]);

Edit:

What I am trying to do:

module.service('updateDashboardService', function($scope, $http){
    this.update_dashboard = function() {
        $scope = $scope; 
        var url = Django.url('submission:active_list_ajax', {
            site : site
        });

        $http.get(url).success(function(data) {
            $scope.list = data.results;
        });
    };
});

module.controller("SubmissionTreeController", ["$scope", "$http", "$modal", "updateDashboardService", function($scope, $http, $modal, updateDashboardService) {
    $scope.selected_items = {};

    updateDashboardService.update_dashboard();

    var timer = setInterval(function() {
        $scope.$apply(updateDashboardService.update_dashboard($scope, $http));
    }, 1000 * 60);

What I am getting: Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- updateDashboardService

Edit 2:

module.service('updateDashboardService', function($rootScope, $http){
    this.update_dashboard = function() {
        var url = Django.url('submission:active_list_ajax', {
            site : site
        });

        $http.get(url).success(function(data) {
            $rootScope.list = data.results;
        });
    };
});

create a factory method,so it can be used across controllers — Gopesh
– Gopesh, Commented Jun 18, 2014 at 9:03

StuR · Accepted Answer · 2014-06-18 09:16:51Z

2

As @Gopesh says create a factory method, or, you can do something like this in SubmissionTreeController:

    $scope.$on("event:updateDashboard", function(){ update_dashboard() });

And in your other controller:

    $http.post(url, $scope.selected_items).success(function(data) {
        $scope.$emit("event:updateDashboard");
    });

answered Jun 18, 2014 at 9:16

StuR

12.3k9 gold badges47 silver badges66 bronze badges

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

2 Comments

Efrin Over a year ago

Could you check at my code that I've provided? It does not seem to work

Efrin Over a year ago

I've added a working example in my first post. I'll take a look into scope.emit because it might be way cleaner way in usage of functions in different parts of application.

Collectives™ on Stack Overflow

Angular.js - making function available in other controllers

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related