Javascript 具有AngularJS的未知提供程序_Javascript_Angularjs_Angularjs Scope_Angular Services

Javascript 具有AngularJS的未知提供程序

javascript angularjs

Javascript 具有AngularJS的未知提供程序,javascript,angularjs,angularjs-scope,angular-services,Javascript,Angularjs,Angularjs Scope,Angular Services,我想用AngualrJS创建一个服务和一个控制器。问题是我需要在我的服务中访问$scope。我认为最好的解决办法是直接将此服务放在控制器中，但我不知道如何做。这是我的HTML： <div ng-controller="myController"> <input type="text" id="idInput" name="idInput" ng-model="nameModel">

我想用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>

这是我的服务：

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

我希望你能帮助我。

谢谢。

首先不要在文件中使用var

d3DemoApp=angular.module（“d3DemoApp”，[]）

使用

angular.module（“D3demoApp”），[]）

一次来实例化您的模块，然后使用

angular.module（“D3demoApp”）

在您的plknr中：

您忘了包含服务文件

我没有看到

数据服务的任何定义

，这就是为什么出现

未知提供程序dataServiceProvider错误

首先，不要在文件中使用var

d3DemoApp=angular.module（“d3DemoApp”，[]）

使用

angular.module（“D3demoApp”），[]）

一次来实例化您的模块，然后使用

angular.module（“D3demoApp”）

在您的plknr中：

您忘了包含服务文件

我没有看到

数据服务的任何定义

，这就是为什么出现

未知提供程序dataServiceProvider错误

服务

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

服务

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

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

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

});

有很多方法可以做到这一点。我最喜欢的是创建另一个引用范围的服务
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);

});

首先，您不能/不应该在服务中使用$scope
。您不能在服务中注入$scope
。您可以将$scope
作为函数的参数传递，但这不是一个好主意。因为，我们不希望我们的服务使用所有$scope变量。
现在，要使用dataService
（假设dataService.getCommitData（param）
确实有一个对服务器的调用）重写服务，从异步操作返回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;
        });
    };
});

因此，在上面的代码中，我基本上是从这个.loadData
函数返回一个承诺。当我们从controller调用CommonService.myFunction
时，我们在中得到响应，然后
解析回调函数，并将chartData
从响应设置为$scope.chartData
首先，您不能/不应该在服务中使用$scope
。您不能在服务中注入$scope
。您可以将$scope
作为函数的参数传递，但这不是一个好主意。因为，我们不希望我们的服务使用所有$scope变量。
现在，要使用dataService
（假设dataService.getCommitData（param）
确实有一个对服务器的调用）重写服务，从异步操作返回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;
        });
    };
});

因此，在上面的代码中，我基本上是从这个.loadData
函数返回一个承诺。当我们从控制器调用CommonService.myFunction
时，我们在中得到响应，然后
解析回调函数，并将chartData
从响应设置为$scope.chartData
服务的优点是您可以将您的服务对象共享给任何控制器，只要服务注入该控制器。不要使用$scope.charData，而是尝试定义此.charData=''；作为一个侧节点，您的代码看起来有点混乱，试试John Pappa的styleguide：服务的优点是您可以将您的服务对象共享给任何控制器，只要服务注入该控制器。不要使用$scope.charData，而是尝试定义此.charData=''；作为一个侧节点，您的代码看起来有点混乱，请尝试John Pappa的样式指南：您好，我有一个错误，CommonService没有在我的controllerBubble上定义：CommonService.myFunction（$scope.searchText）
您是否在应用程序的控制器中注入了CommonService
？另外，检查是否存在任何打字错误。是的，你来这里是为了让作品成为一个傻瓜吗？你可以向loadData的身体发出警报…你的plunker中有很多错误。您甚至没有在plunker中提供dataService
服务。然而，我用你的那一个做了另一个。使用getCommitData
函数创建了一个dataService
服务。在文本框中键入并单击按钮，您将获得一个示例chartData
对象。您好，我有一个错误，CommonService没有在我的controllerBubble上定义：CommonService.myFunction（$scope.searchText）
您是否在应用程序的控制器中注入了CommonService
？另外，检查是否存在任何打字错误。是的，你来这里是为了让作品成为一个傻瓜吗？你可以向loadData的身体发出警报…你的plunker中有很多错误。您甚至没有在plunker中提供dataService
服务。然而，我用你的那一个做了另一个。使用getCommitData
函数创建了一个dataService
服务。在文本框中键入并单击按钮，您将获得一个示例chartData
对象。请看这个，你来是为了让作品成为一个失败者吗？你可以向loadData的尸体发出警报…你是来让works成为劫掠者的吗？您只需向loadData的主体发出警报。。。