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服務