javascript - AngularJS 的未知提供者

Question

我想在 AngualrJS 中创建一个服务和一个 Controller 。问题是我需要在我的服务中访问 $scope。我认为好的解决方案是将此服务直接放在 Controller 中，但我不知道该怎么做。这是我的 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>

这是我的 Controller :

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

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

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;
        });
    };
});

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