Javascript AngularJS：获取服务数据_Javascript_Angularjs_Angularjs Service

Javascript AngularJS：获取服务数据

javascript angularjs

Javascript AngularJS：获取服务数据,javascript,angularjs,angularjs-service,Javascript,Angularjs,Angularjs Service,目标在两个不同的控制器中访问服务、检索信息和显示服务信息（稍后这些控制器将独立地处理这些数据）现场演示 index.html 问题如何检查服务是否捕捉到原始句子为什么{{fetch1}}和{{fetch2}都不能正确显示这是与控制器交互的服务的正确使用吗？有更好的方法吗在html中，您正在调用setString。如果您的意图是通过HTML调用服务方法，那么它将不起作用。您需要将服务注入控制器，通过控制器公开其方法，然后从HTML调用公开的方法其次，您没有向控制器注入$scope。

目标

在两个不同的控制器中访问服务、检索信息和显示服务信息（稍后这些控制器将独立地处理这些数据）

现场演示

index.html 问题

如何检查服务是否捕捉到原始句子

为什么{{fetch1}}和{{fetch2}都不能正确显示

这是与控制器交互的服务的正确使用吗？有更好的方法吗

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

其次，您没有向控制器注入$scope。这是您查看{{fetch}}的方式

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

希望这有助于

从阅读服务文档开始…服务没有

$scope

。。还要阅读控制器文档以及如何正确注入依赖项。建议你仔细学习一些教程。你的小应用程序中已经有很多问题…最重要的是学会使用浏览器控制台查找错误你是对的-用Angular走出我的舒适区一点，并且对所有复杂的问题有一个粗略的理解-谢谢！

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

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();
}]);

/* 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();
}]);