AngularJS的未知提供程序
[英]Unknown Provider with AngularJS
問題描述
我想在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);
}
}]);
我希望你能幫助我。 謝謝。
5 個解決方案
解決方案1
0 2016-05-17 14:11:42
首先，不要在文件中使用var d3DemoApp = angular.module("D3demoApp",[]) 。
一次使用angular.module("D3demoApp",[])實例化您的模塊，然后使用angular.module("D3demoApp")獲取現有模塊的引用
在您的plknr中：
- 您忘記包含服務文件
- 我沒有看到
dataService任何定義，這就是為什么您有unknown provider dataServiceProvider error。
解決方案2
0 2016-05-17 14:16:32
有很多方法可以做到這一點。 我最喜歡的是創建另一個引用范圍的服務。
d3DemoApp.service('scopeServer', ['dataService', function(dataService) {
var scope;
return {
scope: function(_scope) {
if (typeof _scope !== 'undefined')
scope = _scope;
return scope;
}
}
}]);
該服務在單例中維護對范圍的引用，並在您調用scopeService.scope();任何位置返回該scopeService.scope();
您可以最初在控制器中設置范圍。
d3DemoApp.controller('controllerFilterSearch',function($rootScope,$scope, scopeServer) {
scopeServer.scope($scope);
});
解決方案3
0 2016-05-17 14:25:45
<!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);
};
});
解決方案4
0 已采納 2016-05-17 14:38:58
首先，您不能/不應該在服務中使用$scope 。 您不能在服務中注入$scope 。 您可以將$scope作為函數的參數傳遞，但這不是一個好主意。 因為，我們不希望我們的服務使用所有$scope變量。 現在，要重寫您的服務以使用dataService從異步操作返回chartData （假設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;
});
};
});
因此，在上面的代碼中，我基本上是從this.loadData函數返回一個this.loadData 。 當從控制器調用CommonService.myFunction時，我們在then解析的回調函數中獲取響應，並將響應的chartData設置為$scope.chartData 。
解決方案5
-1 2016-05-17 14:15:43
服務
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-未知提供程序：AuthProvider
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.