AngularJS как использовать функцию от одного контроллера в другом контроллере

Question

Я создаю модульное приложение в angularjs, у меня есть два модуля дома и шаблоны. как использовать функции одного модуля во второй модуль
Модуль Главных

angular.module('home',[]).controller('homeCtrl', function($scope){ 
     //this function to templatesModule 
     $scope.useThisFunctionInTemplateCtrl = function(){} 
    }) 

шаблоны модулей

angular.module('templates',[]).controller('templatesCtrl', function($scope){ 
     //here function from homeCtrl 
     $scope.functionFromhomeCtrl = function(){} 
    }) 

Главного app.js

angular.module('myApp',['home', 'templates']); 

Answer 1

Вам нужен service для обмена информацией между контроллерами:

angular.module('yourModule').factory('yourService', function(){ 
    var self = this; 

    self.sharedFunction = function(){} 

    return self; 
}) 

и внедрить его в контроллерах

angular.module('home',[]).controller('homeCtrl', function($scope, yourService){ 
    //this function to templatesModule 
    $scope.useThisFunctionInTemplateCtrl = yourService.sharedFunction(); 
}) 

$ rootScope для хранения глобальных переменных, следует избегать иначе.

Answer 2

Это не хорошая практика, но удовлетворяет ваши потребности.

Доступ к функциям можно получить через controllers с использованием $rootScope.

Подробнее от here

Home Controller:

angular.module('home',[]).controller('homeCtrl', function($scope, $rootScope){ 
     //this function to templatesModule 
     $rootScope.useThisFunctionInTemplateCtrl = function(){} 
    }) 

Другой контроллер:

angular.module('templates',[]).controller('templatesCtrl', function($scope, $rootScope){ 
    //here function from homeCtrl 
    $rootScope.useThisFunctionInTemplateCtrl(); //from another controller 
    $scope.functionFromhomeCtrl = function(){} 
}) 

Answer 3

Вы можете сделать это двумя способами:

1. Создание и использование AngularJS службы:

Вот полный пример того, как создать AngularJS службы и использовать AngularJS Service Mehtod в разные Контроллеры:

//AngularJS Module 

var app = angular.module("Demo", ["ngRoute"]) 

//AngularJS Route Config 

app.config(function($routeProvider, $locationProvider) { 
    $routeProvider.caseInsensitiveMatch = true; 
    $routeProvider.when("/products/details/:id", 
    { 
     templateUrl: "Temaplates/details.html", 
     controller: "productDetailsController" 
    }) 
    .when("/products/edit/:id", 
    { 
     templateUrl: "Temaplates/edit.html", 
     controller: "productEditController" 
    }) 

// AngularJS Service 

app.factory('productService', function ($http, $routeParams) { 
     return { 
      getDataById: function() { 
       //return promise from here 
       return $http.get("http://localhost:43618/api/Products", { 
        params: { id: $routeParams.id } 
       }); 
      } 
     }; 
    }); 

// AngularJS Controllers Where Service Method has been used 

app.controller("productDetailsController", function ($scope, $http, $routeParams, $location, productService) { 
    $scope.message = "Product Details"; 
    productService.getDataById().then(function (response) { 
     $scope.product = response.data; 
    }, function (error) { 
     console.log("Error occured ", error); 
    }); 
}); 

.controller("productEditController", function ($scope, $http, $routeParams, $location, productService) { 
    $scope.message = "Edit Page"; 
    $scope.product = {}; 

    productService.getDataById().then(function (response) { 
     $scope.product = response.data; 
    }, function (error) { 
     console.log("Error occured ", error); 
    }); 

    $scope.updateProduct = function (product) { 
     $http({ 
      method: "PUT", 
      url: "http://localhost:43618/api/Products", 
      params: { id: $routeParams.id }, 
      data: product 
     }) 
     .success(function() { 
      alert("Product Updated Successfully"); 
      $location.path('/products'); 
     }); 
    } 

}) 

2. Использование rootScope объекта

Но есть проблема с использованием объекта rootScope, а именно: всякий раз, когда вы обновляете объект rootScope, страница будет потеряна.

Так что всегда лучше использовать AngularJS Service над rootScope