演示

Question

我有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: '&#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>

TypeError：无法读取未定义的属性“ 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;
    }
}]);

我试图以不同的顺序添加两个文件，但这不能解决问题。我在这里做错了什么？

我在HTML中引用了以下3个js文件

<script src="../Script/angular.js"></script>
<script src="../Services/currencyConverter.js"></script>
<script src="../Script/cartController.js"></script>

Answer 1

您错过了注入 $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 ;
});

Answer 2

$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>

注入的服务未定义

2 个答案:

演示