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")

获取现有模块的引用

在你的朋友中：

您忘记包含服务文件
我没有看到dataService的任何定义，这就是unknown provider dataServiceProvider error的原因。

Answer 2

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

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

     var scope;

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

            return scope;
         }
     } 

}]);

此服务维护对单例范围的引用，无论您在何处调用scopeService.scope();

，都会将其返回

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

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

    scopeServer.scope($scope);

});

Answer 3

<!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 4

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

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。当我们从控制器调用CommonService.myFunction时，我们会在then已解决的回调函数中获得响应，并将chartData从响应设置为$scope.chartData。

Answer 5

服务

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

使用AngularJS的未知提供程序

5 个答案: