AngularJS共享使用$ rootScope的工廠，然後丟棄$ rootScope

我想在我的應用程序中共享這樣的功能，爲此我有幾個工廠。問題是我必須在需要的時候在每個控制器中添加所有這些工廠。隨着工廠數量的不斷增加，控制器這種繁瑣的任務！

因此，我試圖找到一種方法來減少這種冗餘。在SO瀏覽了一樣，我碰到以下問題：

Can I make a function available in every controller in angular?

這是我期待的，而下面的答案尋找最適合我：

https://stackoverflow.com/a/24714658/3375368

現在我想先走一步，刪除需要插入$rootScope！

<!doctype html> 
<html ng-app="myApp"> 
<head> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script> 
    <script type="text/javascript"> 
     var myApp = angular.module('myApp', []); 

     myApp.factory('myService', function() { 
      return { 
       foo: function() { 
        alert("I'm foo!"); 
       } 
      }; 
     }); 

     myApp.run(function($rootScope, myService) { 
      $rootScope.appData = myService; 
     }); 

     myApp.controller('MainCtrl', ['$scope', '$rootScope', function($scope, $rootScope){ 

      appData.foo() //This wont work 
      $rootScope.appDate.foo() //This will work 

      //Is there a way to remove dependancy on $rootScope?? 

     }]); 

    </script> 
</head> 
<body ng-controller="MainCtrl"> 
    <button ng-click="appData.foo()">Call foo</button> 
    <!-- This works, but I wont be using this, its from original post --> 
</body> 
</html>

另一個問題是，這種做法是否是好？ &它將如何影響工廠數據共享的工作，即是否有任何缺陷？

來源

2017-04-03 demonofthemist

或許不是一個好主意，讓你的觀點直接調用你的服務。爲什麼要刪除'$ rootScope'依賴項？ – JLRishe

@JLRishe，如果可能的話減少注入依賴 – demonofthemist

@JLRishe我對angularjs很陌生，剛開始深入探索它，如果這是做事情的恰當方式，那麼我對它很好，我只是好奇如果我可以用其他方式完成，結果是什麼！ – demonofthemist

如果您的服務位於$rootScope，則應該可以從$scope訪問它們。因此，沒有必要對包括$rootScope依賴：

<!doctype html> 
 
<html ng-app="myApp"> 
 
<head> 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script> 
 
    <script type="text/javascript"> 
 
     var myApp = angular.module('myApp', []); 
 

 
     myApp.factory('myService', function() { 
 
      return { 
 
       foo: function() { 
 
        alert("I'm foo!"); 
 
       } 
 
      }; 
 
     }); 
 

 
     myApp.run(function($rootScope, myService) { 
 
      $rootScope.appData = myService; 
 
     }); 
 

 
     myApp.controller('MainCtrl', ['$scope', function($scope){ 
 
      $scope.appData.foo() //This will work 
 
     }]); 
 

 
    </script> 
 
</head> 
 
<body ng-controller="MainCtrl"> 
 
    <button ng-click="appData.foo()">Call foo</button> 
 
    <!-- This works, but I wont be using this, its from original post --> 
 
</body> 
 
</html>

然而，這不是對所有的東西加載到$rootScope一個好主意。 AngularJS的依賴注入系統的存在是有原因的，但如果你真的要避免實際使用的服務，因爲他們預期的，那麼你可以創建一個包含所有其他的聚合服務：

<!doctype html> 
 
<html ng-app="myApp"> 
 
<head> 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script> 
 
    <script type="text/javascript"> 
 
     var myApp = angular.module('myApp', []); 
 

 
     myApp.factory('myService', function() { 
 
      return { 
 
       foo: function() { 
 
        alert("I'm foo!"); 
 
       } 
 
      }; 
 
     }); 
 

 
     myApp.factory('allMyServices', ['myService', function (myService) { 
 
      return { 
 
       myService: myService 
 
      }; 
 
     }]); 
 
     myApp.controller('MainCtrl', ['$scope', 'allMyServices', function($scope, allMyServices){ 
 
      allMyServices.myService.foo() //This will work 
 
     }]); 
 

 
    </script> 
 
</head> 
 
<body ng-controller="MainCtrl"> 
 
</body> 
 
</html>

來源

2017-04-03 08:40:50 JLRishe

感謝您的努力。一個問題就是，個人依賴注入與第二種方法有什麼不同？ – demonofthemist

@demonofthemist在第二種方法中，您只需要注入'allMyServices'作爲依賴關係，因此將所有不同服務注入控制器的_tedious_任務將被解析 – tanmay

@tanmay：D，是的那就是要點！但由於我們沒有按照他們的意圖使用這些服務，所以我在問，工作或行爲方面是否有任何不同？ – demonofthemist

AngularJS共享使用$ rootScope的工廠，然後丟棄$ rootScope

回答

相關問題