Question

我正在尝试使用某个服务来持久保存某些值，以便在某些ng-view中共享。

我在下面有这个script.js和about.html文件（加上一些index.html，其中包含ng-view位置和其他一些我认为不相关的文件）。

我希望，当我按下按钮激活我在服务中定义的set（）方法时。

然而，当我在chrome上按下此按钮时（在localhost：.. / ...当然）我在开发者模式（F12）上收到此错误消息： angular.js：12722 TypeError：myService.set不是函数

为什么呢？我已将其明确定义为一种功能（通过定义）。是服务返回的对象中的错误吗？

由于

的script.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>

Answer 1

你的控制器在函数中没有足够的参数。所以而不是

scotchApp.controller('SharedController', ['$scope', '$routeParams', 'myService',
                function($scope, myService) {

应该是

scotchApp.controller('SharedController', ['$scope', '$routeParams', 'myService',
                function($scope, $routeParams, myService)

{

关于它为什么不起作用的更多信息。 Angular使用数组在运行时确定依赖关系，以确保已加载所有必需的资源（providers）;它使用函数之前的数组空间作为提供加载的列表。当DI解析时，它按照它们在数组中列出的顺序将提供者分配给函数的参数。

角度服务的功能不能使用

1 个答案: