代码之家  ›  专栏  ›  技术社区  ›  Imad

注入服务未定义

dependency-injection angularjs javascript
  •  1
  • Imad  · 技术社区  · 6 年前

    我有2个 javascript 文件,一个用作控制器,另一个用作服务。当我向控制器注入服务并访问它的功能时,它说 

    var app = angular.module('currencyConverterModule', []);
app.factory('currencyConverter', function() {

	var localToINR = [
		{USD: 0.015},
		{GBP: 0.011}
	];

	var convertToLocalCurrency = function (amount, localCurrency) {
		return amount * localToINR[localCurrency];
	}
 
	return { convertToLocalCurrency };
});

var app = angular.module('cartModule', ['currencyConverterModule']);
app.controller('cartController', ['$scope', 'currencyConverter', function ($scope, currencyConverter){

	$scope.SelectedCountry = '0';
	$scope.localCurrency = function(amount, currencyConverter) {
		currencyConverter.convertToLocalCurrency(amount, $scope.SelectedCountry);
	}

	$scope.Products = [
		{name: 'TV', price: $scope.localCurrency(30000), quantity: 1},
		{name: 'Fridge', price: $scope.localCurrency(35000), quantity: 1},
		{name: 'AC', price: $scope.localCurrency(40000), quantity: 1}
	];	

	$scope.Countries = [
		{name: 'India', currency: 'INR', currencySymbol: '&#8377'},
		{name: 'United States', currency: 'USD', currencySymbol: '$'},
		{name: 'England', currency: 'GBP', currencySymbol: '£'}
	];	

	$scope.getCartValue = function () {
		var total = 0;
		for (var i = 0; i < $scope.Products.length; i++) {
			total = $scope.Products[i].price * $scope.Products[i].quantity;
		}
		return total;
	}
}]);
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body>
	<div ng-app="cartModule" ng-controller="cartController">
		<table ng-hide="SelectedCountry == '0'">
			<tr>
				<th>Product</th>
				<th>Price Per Unit</th>
				<th>	Quantity</th>
				<th>Total Price</th>
			</tr>
			<tr ng-repeat="product in Products">
				<td ng-bind="product.name">					
				</td>
				<td ng-bind="product.price | currency : '&#8377'"></td>
				<td>
					<input type="number" ng-model="product.quantity" min="0" max="100">
				</td>
				<td ng-bind="product.price * product.quantity | currency : '&#8377'"></td>
			</tr> 
			<tr>
				<th colspan="3">Total</th>
				<th ng-bind="getCartValue() | currency : '&#8377'"></th>
			</tr>
		</table>

		<select ng-model="SelectedCountry">
			<option value="0">Select your country</option>
			<option ng-repeat="country in Countries" ng-value="country.name" ng-bind="country.name"></option>
		</select>
	</div>
</body>

    类型错误:无法读取未定义的属性“methodname”

    服务 

    var app = angular.module('currencyConverterModule', []);
app.factory('currencyConverter', function() {

    var localToINR = [
        {USD: 0.015},
        {GBP: 0.011}
    ];

    var convertToLocalCurrency = function (amount, localCurrency) {
        return amount * localToINR[localCurrency];
    }

    return { convertToLocalCurrency };
});

    和 控制器 

    var app = angular.module('cartModule', ['currencyConverterModule']);
app.controller('cartController', ['currencyConverter', function ($scope, currencyConverter){

    $scope.SelectedCountry = '0';
    $scope.localCurrency = function(amount, currencyConverter) {
        currencyConverter.convert(amount, $scope.SelectedCountry); //Error here
    }

    $scope.Products = [
        {name: 'TV', price: $scope.localCurrency(30000), quantity: 1},
        {name: 'Fridge', price: $scope.localCurrency(35000), quantity: 1},
        {name: 'AC', price: $scope.localCurrency(40000), quantity: 1}
    ];  

    $scope.Countries = [
        {name: 'India', currency: 'INR', currencySymbol: '&#8377'},
        {name: 'United States', currency: 'USD', currencySymbol: '$'},
        {name: 'England', currency: 'GBP', currencySymbol: '&#163;'}
    ];  

    $scope.getCartValue = function () {
        var total = 0;
        for (var i = 0; i < $scope.Products.length; i++) {
            total = $scope.Products[i].price * $scope.Products[i].quantity;
        }
        return total;
    }
}]);

    我尝试在视图中按不同的顺序添加这两个文件,但这无法解决问题。我在这里做错什么了?

    我引用3个HTML JS文件,如下所示 

    <script src="../Script/angular.js"></script>
<script src="../Services/currencyConverter.js"></script>
<script src="../Script/cartController.js"></script>
    2 回复  |  直到 6 年前
        1
  •  2
  •   Sajeetharan    6 年前

    你错过了注射 $scope , 

    app.controller('cartController', ['$scope','currencyConverter', function ($scope, currencyConverter)

    方法名为 convertToLocalCurrency 不仅仅是 convert 

    currencyConverter.convertToLocalCurrency(amount, $scope.SelectedCountry);

    编辑

    由于函数参数名称也 currencyConverter ,您需要将其更改为其他内容或完全删除,因为您不使用, 

    $scope.localCurrency = function(amount, currency) {
    currencyConverter.convertToLocalCurrency(amount, $scope.SelectedCountry);
}

    WORKING DEMO

    我也修改了你的服务,以返回工厂,方法如下 

    var app = angular.module('currencyConverterModule', []);
app.factory('currencyConverter', function() {
  var dataFactory={};
    var localToINR = [
        {USD: 0.015},
        {GBP: 0.011}
    ];

    dataFactory.convertToLocalCurrency = function (amount, localCurrency) {
        return amount * localToINR[localCurrency];
    }

    return dataFactory ;
});
        2
  •  1
  •   georgeawg    6 年前

    这个 $scope.localCurrency 函数错误地具有两个参数: 

    app.controller('cartController', ['$scope', 'currencyConverter',
  function ($scope, currencyConverter){    
    $scope.SelectedCountry = '0';
    $̶s̶c̶o̶p̶e̶.̶l̶o̶c̶a̶l̶C̶u̶r̶r̶e̶n̶c̶y̶ ̶=̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶a̶m̶o̶u̶n̶t̶,̶ ̶c̶u̶r̶r̶e̶n̶c̶y̶C̶o̶n̶v̶e̶r̶t̶e̶r̶)̶ ̶{
    $scope.localCurrency = function(amount) {
        currencyConverter.convertToLocalCurrency(amount, $scope.SelectedCountry);
    }

    这个 currencyConverter 工厂注入控制器构造功能,而不是本地范围功能。

    演示 

    var app = angular.module('currencyConverterModule', []);
app.factory('currencyConverter', function() {

	var localToINR = [
		{USD: 0.015},
		{GBP: 0.011}
	];

	var convertToLocalCurrency = function (amount, localCurrency) {
		return amount * localToINR[localCurrency];
	}
 
	return { convertToLocalCurrency };
});

var app = angular.module('cartModule', ['currencyConverterModule']);
app.controller('cartController', ['$scope', 'currencyConverter', function ($scope, currencyConverter){

	$scope.SelectedCountry = '0';
	$scope.localCurrency = function(amount) {
		currencyConverter.convertToLocalCurrency(amount, $scope.SelectedCountry);
	}

	$scope.Products = [
		{name: 'TV', price: $scope.localCurrency(30000), quantity: 1},
		{name: 'Fridge', price: $scope.localCurrency(35000), quantity: 1},
		{name: 'AC', price: $scope.localCurrency(40000), quantity: 1}
	];	

	$scope.Countries = [
		{name: 'India', currency: 'INR', currencySymbol: '&#8377'},
		{name: 'United States', currency: 'USD', currencySymbol: '$'},
		{name: 'England', currency: 'GBP', currencySymbol: '&#163;'}
	];	

	$scope.getCartValue = function () {
		var total = 0;
		for (var i = 0; i < $scope.Products.length; i++) {
			total = $scope.Products[i].price * $scope.Products[i].quantity;
		}
		return total;
	}
}]);
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body>
	<div ng-app="cartModule" ng-controller="cartController">
		<table ng-hide="SelectedCountry == '0'">
			<tr>
				<th>Product</th>
				<th>Price Per Unit</th>
				<th>	Quantity</th>
				<th>Total Price</th>
			</tr>
			<tr ng-repeat="product in Products">
				<td ng-bind="product.name">					
				</td>
				<td ng-bind="product.price | currency : '&#8377'"></td>
				<td>
					<input type="number" ng-model="product.quantity" min="0" max="100">
				</td>
				<td ng-bind="product.price * product.quantity | currency : '&#8377'"></td>
			</tr> 
			<tr>
				<th colspan="3">Total</th>
				<th ng-bind="getCartValue() | currency : '&#8377'"></th>
			</tr>
		</table>

		<select ng-model="SelectedCountry">
			<option value="0">Select your country</option>
			<option ng-repeat="country in Countries" ng-value="country.name" ng-bind="country.name"></option>
		</select>
	</div>
</body>
    推荐文章
    Michael Long  ·  Swift中等级一致性的铸造和测试[副本]
    2 年前
    kc_dev  ·  你能在一个只有Java的Android项目中使用Hilt吗?
    2 年前
    lightrek  ·  在使用@组件的过程中创建了多少个@Autowired“prototype”bean实例
    2 年前
    Maarten Vissers  ·  .NET6-将服务注入程序。反恐精英
    2 年前
    szg1993  ·  使残废NET Core IServiceProvider延迟注册
    2 年前
    Superman.Lopez  ·  在Angular应用程序的编译中找不到声明的InjectionToken
    2 年前
    Jeremy Thompson  ·  无法为服务类型“IRepository”实例化实现类型存储库“1[TDBContext]”
    3 年前
    Bekzod Keldiyarov  ·  在不同的类中多次注入依赖项时,如何获得依赖项的一个实例?
    3 年前
    mhtmalpani  ·  如何为父片段和子片段提供相同的ViewModel实例
    6 年前
    SkarabePL  ·  Yii2依赖注入、配置和继承
    6 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号