AngularJS如何在另一个控制器中使用一个控制器的功能

Question

我在angularjs中创建模块化应用程序，我有两个模块home和模板。 如何将一个模块的功能用于第二个模块
模块首页

    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

您需要一项服务来在控制器之间共享信息：

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

这不是一个好习惯，但是可以满足您的需求。

您可以使用$rootScope通过controllers访问功能。

从这里了解更多

家庭控制器：

    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服务：

这是一个如何在不同的Controller中创建AngularJS服务并使用AngularJS服务方法的完整示例：

//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对象都会丢失。

因此，总是最好在rootScope上使用AngularJS服务