AngularJS 的未知提供商

Question

我想在 AngualrJS 中创建一个服务和一个控制器。问题是我需要在我的服务中访问 $scope。我认为好的解决方案是将此服务直接放在控制器中，但我不知道该怎么做。这是我的 HTML :

                <div ng-controller="myController">
                    <input type="text" id="idInput" name="idInput" ng-model="nameModel">
                    <button class="btn btn-default" ng-click="functionWhenClick()">Execute</button>
                </div>

这是我的控制器：

var variableModuleName = angular.module("nameModule",[]);
variableModuleName.controller('controllerName',function($rootScope,$scope, CommonService) {
    $scope.nameModel = '';
    $scope.scopeFunctionName = function () {
        CommonService.myFunction($scope.nameModel);
    };
});

这是我的服务：

variableModuleName.service('CommonService', ['dataService', function(dataService) {
    this.loadData = function(param) {
        dataService.getCommitData(param).then(function(res) {
            if (res.error) {
                $scope.chartData = res.chartData;
            }
        });
    };

    this.myFunction = function(concatURL){
        this.loadData('URL' + concatURL);
    }
}]);

我希望你能帮助我。谢谢

Answer 1

首先不要在文件中使用 var d3DemoApp = angular.module("D3demoApp",[])。

使用 angular.module("D3demoApp",[]) 一次实例化您的模块，然后使用 angular.module("D3demoApp")

获取现有模块的引用

在你的 plknr 中：

您忘记包含服务文件
我没有看到 dataService 的任何定义，这就是为什么你有 unknown provider dataServiceProvider error.

Answer 2

服务

d3DemoApp.service('CommonService', ['dataService', function(dataService) {
    this.chartData = '';

    this.loadData = function(param) {
        dataService.getCommitData(param).then(function(res) {
            if (!res.error) {
                this.chartData = res.chartData;
            }

        });
    };

    this.myFunction = function(parameterItem){
        this.loadData('http://localhost:3412/bubble/' + parameterItem);
        console.log("Fonction appellée");
    }
}]);

控制器

var d3DemoApp = angular.module("D3demoApp",[]);
d3DemoApp.controller('controllerFilterSearch',function($rootScope,$scope, CommonService) {
    $scope.searchText = '';
    $scope.getSearchText = function () {
        CommonService.myFunction($scope.searchText);
        $scope.searchText = CommonService.chartData;
    };
});

Answer 3

有很多方法可以做到这一点。我最喜欢的是创建另一个引用范围的服务。

d3DemoApp.service('scopeServer', ['dataService', function(dataService) {

     var scope;

     return {
         scope: function(_scope) {
            if (typeof _scope !== 'undefined')
               scope = _scope;

            return scope;
         }
     } 

}]);

无论您在何处调用 scopeService.scope();

，此服务都会在 returns 单例中维护对范围的引用

您最初可以在控制器中设置范围。

d3DemoApp.controller('controllerFilterSearch',function($rootScope,$scope, scopeServer) {

    scopeServer.scope($scope);

});

Answer 4

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="controllerInput.js"></script>
    <script src="app.js"></script>
    <script src="serviceInput.js"></script> <!-- Include --> 
  </head>

  <body ng-app="D3demoApp" ng-controller="controllerFilterSearch">
    <input type="text" id="searchTextBox" name="searchTextBox" ng-model="searchText">
    <button class="btn btn-default" ng-click="getSearchText()">Rechercher</button>
  </body>

</html>

var d3DemoApp = angular.module("D3demoApp",[]);
d3DemoApp.controller('controllerFilterSearch',function($rootScope,$scope, CommonService) {
    $scope.searchText = '';
    $scope.getSearchText = function () {
        CommonService.myFunction($scope.searchText);
    };
});

Answer 5

首先，您不能t/shouldn不能在服务中使用$scope。您不能在服务中注入 $scope。您可以将 $scope 作为函数的参数传递，但这是个坏主意。因为，我们不希望我们的服务使用所有 $scope 变量。现在，要使用 dataService（假设 dataService.getCommitData(param) 确实调用了服务器）将您的服务从异步操作重写为 return chartData，您需要妥善处理承诺。

var d3DemoApp = angular.module("D3demoApp",[]);

// service. Assuming dataService exists
d3DemoApp.service('CommonService', ['dataService', function(dataService) {
    this.loadData = function(param) {
        return dataService.getCommitData(param).then(function(res) {
            // Should the if condition be res.error or !res.error
            if (res.error) {
                return res;
            }
        });
    };

    this.myFunction = function(parameterItem){
        return this.loadData('http://localhost:3412/bubble/' + parameterItem);
        console.log("Fonction appellée");
    }
}]);

// controller
d3DemoApp.controller('controllerFilterSearch',function($rootScope,$scope, CommonService) {
    $scope.searchText = '';
    $scope.getSearchText = function () {
        CommonService.myFunction($scope.searchText).then(function(res) {
            $scope.chartData = res.chartData;
        });
    };
});

所以，在上面的代码中，我基本上是 return 从 this.loadData 函数中获得一个承诺。当我们从控制器调用 CommonService.myFunction 时，我们在 then 解析的回调函数中得到响应，我们将 chartData 从响应设置为 $scope.chartData.

AngularJS 的未知提供商

Unknown Provider with AngularJS

javascript

angularjs

angularjs-scope

angular-services