Question

作为角度js学习的一部分，我创建了一个小应用程序，它将使用服务在两个控制器之间传递数据。下面是我在两个控制器之间传递数据的代码。

控制器代码

<!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错误：[$ injector：unpr] http://errors.angularjs.org/1.5.8/ $ injector / unpr？p0 =％24sampleServiceProvider％20％3C-％20％24sampleService％20％3C-％20NameCtrl 在错误（本机）

任何人都可以指出我正确的方向，我在这个代码上做错了。

非常感谢...

Answer 1

在控制器中注入服务时不要使用'$'：

变化：

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。

编辑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>

使用示例服务在控制器之间传递数据时出错

1 个答案: