Question

我有一个问题，因为我是angularjs的新手。我搜索了很多，但无法理解这个概念。我有一个基本概念，一个视图应该有一个控制器，但我们可以为一个视图有多个控制器。我在一个视图下面有两个控制器，并且有一个函数可以说例如addComma函数，我必须在两个控制器中使用但是我想写一次它使它可以在所有控制器之间重复使用5,6控制器相同的观点。所以基本上问题是如何在相同视图或其他视图的所有控制器之间在控制器全局中创建一个函数，以便我可以在我的应用程序中的任何位置使用它。如果这是一个愚蠢的问题我很难理解angularjs的概念。

 app.controller("GetChargesController", function ($scope, GetService, $rootScope) {
    $scope.Title = "Charges Details List";
    $rootScope.loading = true;
    // Calling Serivce Method here
    $scope.GetChargesDetails = GetService.GetAll("CommonApi", "GetChargesDetails").then(function (d) {
        $scope.ChargesDetails = d;
        $rootScope.loading = false;
    });
    // add comman function goes here
       $scope.addComma = function(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

     });

    app.controller("GetPaymentsController", function ($scope, GetService, $rootScope) {
    $scope.Title = "Payments Details List";
    $rootScope.loading = true;
    // Calling Serivce Method here
    $scope.GetPaymentsDetails = GetService.GetAll("CommonApi", "GetPaymentsDetails").then(function (d) {
        $scope.PaymentsDetails = d;               
        $rootScope.loading = false;
    });
    // add comman function goes here
    $scope.addComma = function (x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
       }

     });

以下是为了从数据库获取任何类型的数据而编写的通用服务（使用asp.net web api）。正如我所读到的那样，角度服务可以存储数据，当我们在链接上来回移动时，我们不需要一次又一次地调用数据库让我们说例如我有这3个链接在页面上。主页链接，PaymentCharges链接，订单链接。所以主页视图默认打开。当我点击PaymentCharges Link时，调用将从数据库中获取数据并呈现其视图，但是当我单击Home Link时，应该没有调用数据库来获取主页的数据或者当我再次点击前进时PaymentCharges链接第二次应该没有调用数据库，但我在firebug控制台选项上看到它调用函数并转到数据库获取数据。我认为我们需要使用缓存来保存数据不发送数据呼叫数据库。

    app.factory("GetService", function ($http) {
    var thisService = {};

    // get all data from database
    thisService.GetAll = function (controllername, methodName) {
        var promise = $http({
            method: 'GET',
            url: '/api/'+controllername + '/' + methodName
        })
            .then(function (response) {
                return response.data;
            },
            function (response) {
                return response.data;
            });
        return promise;
    };
});

Answer 1

创建一个utils服务并在那里添加addComma函数。注入utils服务并重用控制器中的addComma

app.factory('utils', function() {
  return {
    addComma: function() {}
  }
});

app.controller("GetChargesController", function ($scope, utils) {
  $scope.addComma = utils.addComma;
});

app.controller("GetPaymentsController", function ($scope, utils) {
  $scope.addComma = utils.addComma;
});

Answer 2

为什么不将数据存储在服务中？

你可以这样做：

library(plotly)
xform <- list(categoryorder = "array",
              categoryarray = df$V1)

plot_ly(data = df,
        x = ~V1,
        y = ~V2,
        type = "scatter",
        mode = "lines+markers") %>%
        layout(title = "my title",
               xaxis = xform)

然后，您可以使用.then(function (resp) { thisService.controllerName.data = resp.data }

在代码中引用该变量

Answer 3

管理服务问题的几种方法：

通过将承诺存储在服务中来重用承诺：

 // create an object to store promises
var promises = {};
thisService.GetAll = function(controllername, methodName) {

    promises[controllername] = promises[controllername] || {};
    // if the particular promise doesn't already exist create it as a property of above object
    if (!promises[controllername][methodName]) {
      promises[controllername][methodName] = $http({...}).then(...;

    }
    // now return the specific stored promise
    return promises[controllername][methodName];
 };

或存储数据并使用$q返回一个不同的承诺，该承诺在存在的数据已存在时解析。确保为此方法注入$q

var data = {};
thisService.GetAll = function(controllername, methodName) {

  data[controllername] = data[controllername] || {};

  if (data[controllername][methodName]) {
    // data exists for this controller and method, no need for new request
    return $q.resolve(data[controllername][methodName]);
  } else {
    return $http({...}).then(function(response) {
      // store the data for next use
      var newData = response.data;
      data[controllername][methodName] = newData;
      return newData;
    });    
  }   

};

Answer 4

相反，我建议你使用这样的东西，这可能会使它更通用。检查以下代码

appResources-Factory将包含所有需要公开的资源。

indexServices-Factory将包含与索引控制器对应的所有服务。

(function () {
use strict';
var commonServices = angular.module('commonServices', ['ngResource']);

commonServices.factory('appResources', ['$resource',
   function ($resource) {

       var indexResource=$resource('/api/index/:id');
        return {

               indexResource:indexResource

        }
}]);

 commonServices.factory('indexService',['appResources',
 function (appResources){

    var getAllIndexes =function(sucesscallback){

       appResources.indexResource.query({}).$promise.then(
       //success
      function( value ){/*success events and Data is present in the 'value'*/
       sucesscallback(value);
       },
       //error
        function( error ){/*failure events*/}
       )

    }

   }
  ]);
});

控制器方法调用服务并获取$ scope变量中的值，如

(function () {
'use strict';
 angular.module('saniehhaApp')
    .controller('indexController', indexController);
        indexController.$inject = ['$location', 'indexService'];
            function indexController($location, index,indexService) {
            /* jshint validthis:true */
                    indexService.getAllIndexes(function(sucesscallback){
                        $scope.value=sucesscallback;
                    })
                //$locaton.qwets=....
                }
})();

如何在angularjs中使两个或多个控制器之间的函数可重用

4 个答案: