Сервис в AngularJS не работает
Я работаю над самым простым из возможных подходов AngularJS для приложений, чтобы понять его ход. Я пытаюсь передать простую строку из службы в контроллер, и оттуда я хочу напечатать эту строку в index.html. Кажется, мой остальной код работает, но не обслуживает и не уверен, что мне здесь не хватает...
index.html
<!DOCTYPE html>
<html ng-app="angularFormsApp">
<head>
<title>Angular Form</title>
<meta charset="utf-8" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="App/AngularFormsApp.js"></script>
<script src="App/EmployeeForm/efService.js"></script>
<script src="App/EmployeeForm/efController.js"></script>
<!--<script src="App/EmployeeForm/efDirective.js"></script>
-->
</head>
<body>
<h1>Test AngularJS App Approach</h1>
<div ng-controller="efController">
{{employee}}
</div>
</body >
</html>
AngularFormsApp.JS (модуль)
var angularFormsModule = angular.module('angularFormsApp', []);
efController.js (Контроллер)
angularFormsModule.controller('efController',
function efController($scope, efService) {
$scope.employee = efService.employee;
});
efService.js (Сервис)
angularFormsModule.factory('efService',
function () {
var employee = "Employee Detail Available";
return employee;
});
3 ответа
Решение
Вы, вероятно, хотите вернуть объект вместо строки.
angularFormsModule.factory('efService',
function efService() {
var service = {
employee: "Employee Detail Available"
}
return service;
});
Вы на самом деле вызываете локальную переменную службы, которая не предоставляется вашей службой в вашем контроллере:
$scope.employee = efService.employee;
вы возвращаете функцию с вашего завода, поэтому вы должны использовать ее как таковую в вашем контроллере:
$scope.employee = efService();
Когда вы звоните factory, вам нужно вернуть объект, который содержит properties а также methods быть доступным снаружи с этим экземпляром фабрики.
angularFormsModule.factory('efService',
return {
employee : "Employee Detail Available"
});