AngularJS：获取服务数据答案

【问题标题】：AngularJS : Fetching Service DataAngularJS：获取服务数据
【发布时间】：2015-07-15 21:36:28
【问题描述】：

目标

让 Angular 在两个不同的控制器中访问服务、检索信息并显示服务信息（稍后这些控制器将独立操作这些数据）。

现场演示 http://plnkr.co/edit/pqnt5IHr3N3oUynfbz37?p=preview

index.html

<html ng-app='plunker'>

<head>
  <title>AngularJS - Searching Text</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <h1>Search & Reverse Text</h1>

  <h2>Original Sentence sent to Service</h2>
  <form>
    <input type='text' ng-model='value' placeholder='insert sentence' />
    <button ng-click='setString(value)'>Set</button>
    <pre>Sentence: {{value}} </pre>
  </form>

  <div ng-controller='myController1'>
    <h2>Controller 1 fetching from Service</h2>
    <pre>{{fetch1}}</pre>
  </div>

  <div ng-controller='myController2'>
    <h2>Controller 2 fetching from Service</h2>
    <pre>{{fetch2}}</pre>
  </div>


</body>

</html>

app.js

var app = angular.module('plunker', []);

/*Service to pass data between controllers */
app.service('passData', function() {
  $scope.stringValue = {};

  $scope.getString = function() {
    return stringValue;
  },

  $scope.setString = function(value) {
    stringValue = value;
  }
});

/* Controller1 catched string from  original sentence */
app.controller('myController1',['passData', function($scope) {
  $scope.fetch1 = passData.getString();
}]);

/*Controller2 catched string from  original sentence */
app.controller('myController2', ['passData', function(scope){
  $scope.fetch2 = passData.getString();
}]);

问题

如何检查服务是否捕捉到原句？
为什么 {{fetch1}} 和 {{fetch2}} 都不能正常显示？
这是对与控制器交互的服务的正确使用吗？有更好的方法吗？

【问题讨论】：

首先阅读服务文档...服务没有$scope.. 还要阅读控制器文档以及如何正确注入依赖项。建议你仔细研究一些教程。你的小应用程序中已经出现了很多问题......最重要的是学会使用浏览器控制台来查找错误
你是对的 - 使用 Angular 走出了我的舒适区，并对所有错综复杂的事情有一个粗略的了解 - 谢谢！

标签： javascript angularjs angularjs-service

【解决方案1】：

在您的 html 中，您正在调用 setString。如果您的意图是通过 HTML 调用服务方法，则它不会起作用。您需要将服务注入控制器，通过控制器公开其方法，然后从 HTML 调用公开的方法。

其次，您还没有将 $scope 注入控制器。这样你就可以看到 {{fetch}}

/* Controller1 catched string from  original sentence */
app.controller('myController1',['$scope', 'passData', function($scope, passData) {
  $scope.fetch1 = passData.getString();
}]);

/*Controller2 catched string from  original sentence */
app.controller('myController2', ['$scope','passData', function($scope, passData) {
  $scope.fetch2 = passData.getString();
}]);

但是您将服务注入控制器的方式是正确的

希望对你有帮助

【讨论】：