我正在尝试使用一项服务来保留一些值(value)以供某些 ng-view 共享。
我下面有 script.js 和 about.html 文件(加上一些包含 ng-view 位置的 index.html 和一些我认为不相关的其他文件)。
我希望当我按下按钮时激活我在服务中定义的 set() 方法。
但是，当我在 chrome 上按此按钮(当然是在 localhost:../... 上)时，我在开发人员模式 (F12) 上收到此错误消息: angular.js:12722 TypeError: myService.set 不是函数
为什么？我已经将它明确定义为一个函数(根据定义)。 服务返回的对象是否有错误？谢谢
脚本.js
var scotchApp = angular.module('scotchApp', ['ngRoute']);
scotchApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'SharedController'
})
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'SharedController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'SharedController'
});
});
scotchApp.factory('myService', function() {
var savedData = {}
var set=function (data) {
savedData = data;
}
function get() {
return savedData;
}
return {
set: set,
get: get
}
});
scotchApp.controller('SharedController', ['$scope', '$routeParams', 'myService',
function($scope, myService) {
$scope.updateMsg = function (msg) {
myService.set(msg);
$scope.message = myService.get();
}
}]);
about.html
<div class="jumbotron text-center">
<h1>old value</h1>
<p>{{ message }}</p>
<button type="button" ng-click="updateMsg('I am in about')">Click Me</button>
</div>
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<ul>
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
<div ng-app="scotchApp" ng-view>
</div>
</body>
</html>
最佳答案
您的 Controller 在函数中没有足够的参数。所以而不是
scotchApp.controller('SharedController', ['$scope', '$routeParams', 'myService',
function($scope, myService) {
应该是
scotchApp.controller('SharedController', ['$scope', '$routeParams', 'myService',
function($scope, $routeParams, myService)
{
关于它为什么不起作用的更多信息。 Angular 使用该数组在运行时找出依赖关系，以确保所有必需的资源( providers )已加载；它使用函数之前的数组空间作为要加载的提供列表。当 DI 解析时，它会按照数组中列出的顺序将提供程序分配给函数的参数。
关于javascript - Angular 服务的功能无法使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38063469/