使用示例服務

作爲角JS學習的一部分，當控制器之間通數據獲取錯誤，我創建小應用程序，將通過使用services..below兩個控制器之間的數據是我的代碼在兩個控制器之間傳遞數據..使用示例服務

控制器代碼

<!DOCTYPE html> 
<html lang="en-us" ng-app="myApp"> 
<head> 
<title></title> 
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script> 
<script type="text/javascript"> 
    var app = angular.module('myApp', []); 

app.service('sampleService', [function() { 
    this.user = [name = 'pra', empno ='1234'] 
    this.designation = 'teamlead'; 

}]) 
app.controller('NameCtrl', ['$scope','$sampleService', function ($scope,$sampleService) { 
$scope.empname = $sampleService.user.name; 
$scope.empnumber = $sampleService.user.empno; 
$scope.empdesignation = $sampleService.designation; 
$scope.changevals = function(){ 
    $sampleService.user.empno = '9876'; 
    $sampleService.designation = 'manager'; 
    $scope.empnumber = $sampleService.user.empno; 
    $scope.empdesignation = $sampleService.designation; } 
    }]) 

app.controller('NameCtrl1', ['$scope','$sampleService', function ($scope) { 
    $scope.uEmpiId = $sampleService.user.empno; 
    $scope.uempdesignation = $sampleService.designation; 
$scope.updatevals = function(){ 
    $scope.uEmpiId = $sampleService.user.empno; 
    $scope.uempdesignation = $sampleService.designation; } 
}]) 
</script> 
</head>

下面的代碼是我的html代碼

<body> 
    <div ng-controller="NameCtrl"> 
<div><b> Details - Controller 1</b></div> 
<p>Name : {{empname}}</p> 
<p>Location : {{empnumber}}</p> 
<p>Designation : {{empdesignation}}</p> 
<input type="button" value="Change Values" ng-click="changevals()" /> 
</div> 
<br /> 
<div ng-controller="NameCtrl1"> 
<div><b>Details - Controller 2</b></div> 
<input type="button" value="Change Values" ng-click="updatevals()" /> 
<p>Location : {{uEmpiId}}</p> 
<p>Designation : {{uempdesignation}}</p> 
</div> 
</body>

我無法顯示細節，並得到了如下的錯誤

angular.js：13920錯誤：[$注射器：unpr] http://errors.angularjs.org/1.5.8/ $注射器/ unpr P0 =％24sampleServiceProvider％20％在錯誤3C-％20％24sampleService％20％3 C-％20NameCtrl （天然）

可以在任何一個請點我在正確的方向上我做錯了這個代碼，其中..

提前許多感謝....

來源

2016-07-28 Enigma State

，同時注入不要使用「$」服務於你的控制器：

變化：

app.controller('NameCtrl', ['$scope','$sampleService', function ($scope,$sampleService) {

到：

app.controller('NameCtrl', ['$scope','sampleService', function ($scope,sampleService) {

編輯

也（如@estus建議），您的服務是NameCtrl1

變化碼未定義喲烏爾NameCtrl2從

app.controller('NameCtrl1', ['$scope','$sampleService', function ($scope) {

到

app.controller('NameCtrl1', ['$scope','sampleService', function ($scope, sampleService) {

在代碼中，你使用這個sampleService時，不使用sampleService代替$sampleService。

EDIT 2

改變你的

app.service('sampleService', [function() { 
    this.user = [name = 'pra', empno ='1234'] 
    this.designation = 'teamlead'; 
}])

到

app.service('sampleService', [function() { 
       this.user = {name : 'pra', empno : '1234'}; 
       this.designation = 'teamlead'; 
      }])

最終代碼應該是這樣的：

<!DOCTYPE html> 
 
<html lang="en-us" ng-app="myApp"> 
 

 
    <head> 
 
     <title></title> 
 
     <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script> 
 
     <script type="text/javascript"> 
 
      var app = angular.module('myApp', []); 
 
    
 
      app.service('sampleService', [function() { 
 
       this.user = {name : 'pra', empno : '1234'}; 
 
       this.designation = 'teamlead'; 
 
    
 
      }]) 
 
      app.controller('NameCtrl', ['$scope', 'sampleService', function($scope, sampleService) { 
 
       $scope.empname = sampleService.user.name; 
 
       $scope.empnumber = sampleService.user.empno; 
 
       $scope.empdesignation = sampleService.designation; 
 
       $scope.changevals = function() { 
 
        sampleService.user.empno = '9876'; 
 
        sampleService.designation = 'manager'; 
 
        $scope.empnumber = sampleService.user.empno; 
 
        $scope.empdesignation = sampleService.designation; 
 
       } 
 
      }]) 
 
    
 
      app.controller('NameCtrl1', ['$scope', 'sampleService', function($scope, sampleService) { 
 
       $scope.uEmpiId = sampleService.user.empno; 
 
       $scope.uempdesignation = sampleService.designation; 
 
       $scope.updatevals = function() { 
 
        $scope.uEmpiId = sampleService.user.empno; 
 
        $scope.uempdesignation = sampleService.designation; 
 
       } 
 
      }]) 
 
     </script> 
 
    </head> 
 
    <body> 
 
     <div ng-controller="NameCtrl"> 
 
      <div><b> Details - Controller 1</b> 
 
      </div> 
 
      <p>Name : {{empname}}</p> 
 
      <p>Location : {{empnumber}}</p> 
 
      <p>Designation : {{empdesignation}}</p> 
 
      <input type="button" value="Change Values" ng-click="changevals()" /> 
 
     </div> 
 
     <br /> 
 
     <div ng-controller="NameCtrl1"> 
 
      <div><b>Details - Controller 2</b> 
 
      </div> 
 
      <input type="button" value="Change Values" ng-click="updatevals()" /> 
 
      <p>Location : {{uEmpiId}}</p> 
 
      <p>Designation : {{uempdesignation}}</p> 
 
     </div> 
 
    </body> 
 
</html>

來源

2016-07-28 12:08:11

此外，它是'undefined'在NameCtrl1。 – estus

非常感謝..多一個查詢我無法顯示此{{empname}} {{empnumber}} ..請你幫忙.. –

是啊有錯誤修復它謝謝... –

使用示例服務

回答

相關問題