AngularJS:使用服务不工作在控制器之间发送值

时间:2016-01-22 11:29:28

标签: javascript angularjs service

所以,我目前正致力于项目解决方案,需要2个独立的控制器,他们需要共享数据。确切地说,他们需要分享一次数据。我决定使用服务而不是使用$ rootScope来处理这种数据交换。但是,在我的代码中,我甚至无法运行任何东西,因为我得到了

  

"错误:$ injector:unpr未知提供商未知提供商:   simulationServiceProvider< - simulationService< - mainController"

我在这里和其他网站上找到了类似问题的各种答案,但没有任何帮助。那么为什么我的代码看起来像这样的注入器错误(注意,控制器,模块和服务都在不同的文件中。我也删除了所有不必要的代码,只留下与服务使用相关的代码)

HTML:

 <!DOCTYPE html>
    <html lang="sk" >
        <head>
            <meta charset="utf-8" />
            <title>...</title>
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        </head>
        <body ng-app="App">
            <div ng-controller="mainController">
            ....code here...
            <div ng-controller="simulationController">
            ..more code here...
            </div>
            <script src="app.js"></script>
            <script src="simulationService.js"></script>
            <script src="mainController.js"></script>
            <script src="simulationController.js"></script>
        </body>
    </html>

app.js内容:

var app = angular.module("App", []); 

mainController.js内容:

app.controller('mainController',['$scope','simulationService',function($scope, simulationService) {
...code...
    $scope.startSimulation = function(value) {
            simulationService.kNumber = $scope.kNumber;
            simulationService.deltaFunction =$scope.deltaFunction;
            simulationService.kSourceTracks = $scope.kSourceTracks;
            simulationService.mode = $scope.stateEnum.MODE_2_SIMULATE;
            simulationService.isActive = true;
    }
...code...
}]);

simulationController.js内容:

app.controller('simulationController',['$scope','simulationService',function ($scope,simulationService) {
    if(simulationService.isActive){
        $scope.kNumber = simulationService.kNumber;
        $scope.kSourceTracks = simulationService.kSourceTracks;         
        $scope.mode = simulationService.mode;   
        if($scope.mode == 6){
            $scope.deltaFunction = simulationService.deltaFunction;
        }
    }
}]);

最后是simulationService.js:

app.service('simulationService', function() {
  var _kNumber;
  var _kSourceTracks;
  var _deltaFunction;
  var _mode;
  var _isActive = false;

  this.kNumber = _kNumber; 
  this.kSourceTracks = _kSourceTracks;
  this.deltaFunction =_deltaFunction;
  this mode = _mode;
  this.isActive =  _isActive;
});

这个设置给我注射错误,我完全不知道为什么会发生这种情况。我不确定服务内容是否正确或它是否应该如此,但首先我必须先注入并运行它才能继续前进并努力使其按照我的意愿行事。 非常感谢您的任何建议。

2 个答案:

答案 0 :(得分:1)

在这里创造了一个小提琴:

https://jsfiddle.net/frishi/zxnLwz6d/8/

检查控制台以查看服务是否已正确加载。 马上,服务定义中存在语法错误:

this mode = _mode;应为this.mode = _mode;

答案 1 :(得分:0)

这是因为你的html在js文件之前加载。

将js文件包含在页面顶部。

你的HTML应该是这样的

<!DOCTYPE html>
    <html lang="sk" >
        <head>
            <meta charset="utf-8" />
            <title>...</title>
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            <script src="app.js"></script>
            <script src="simulationService.js"></script>
            <script src="mainController.js"></script>
            <script src="simulationController.js"></script>
        </head>
        <body ng-app="App">
            <div ng-controller="mainController">
            ....code here...
            <div ng-controller="simulationController">
            ..more code here...
            </div>            
        </body>
    </html>

EDITED:  你错过了simulationService.js中的点(。)