Angularjs在服务/工厂内获取输入数据

Question

我是 Angular 的新手，并尝试在提交后制作带有验证和成功消息的测试表单。问题是我找不到如何从.service 内的输入中获取数据并将其粘贴到控制器内的成功消息中（submitForm 函数）。

这是我的控制器：

var myControllers = (function () {
'use strict';
var ctrls = angular.module('myControllers', []);

// Parent controller
ctrls.controller('TitleCtrl', ['$scope', function ($scope) {
    $scope.title = "Contact us";
}]);

ctrls.controller("FormCtrl", function ($scope, msgService) {
    $scope.inputEmail = '';
    $scope.submitForm = function(isValid) {
        if (isValid) {
            $scope.myForm = {};
            $scope.successMessage = 'Your message has been delivered to ' + msgService.inputEmail;
        }
    }
});

ctrls.controller('EmailCtrl', ['$scope', function ($scope) {
    $scope.inputEmail = '';
}]);

// About child controller
ctrls.controller('AboutCtrl', ['$scope', function ($scope) {
    $scope.about = '';
}]);

return ctrls;}());

这是我的服务：

formApp.service('msgService', function () {
return {
    inputEmail: 'EMAIL FROM INPUT INSTEAD STRING'
}});

Check jsfiddle

Answer 1

您需要创建email variable 的instance 才能从服务中调用。

1) 首先将邮件实例保存在msgService中。

msgService.save($scope.inputEmail)

2) 使用实例检索它。 (msgService.getEmail())

$scope.successMessage = 'Your message has been delivered to ' + msgService.getEmail();

var formApp = angular.module('formApp', ['myControllers'])

var myControllers = (function () {
    'use strict';
    var ctrls = angular.module('myControllers', []);

    // Parent controller
    ctrls.controller('TitleCtrl', ['$scope', function ($scope) {
        $scope.title = "Contact us";
    }]);

	ctrls.controller("FormCtrl", function ($scope, msgService) {
		$scope.inputEmail = '';
		$scope.submitForm = function(isValid) {
			if (isValid) {
				$scope.myForm = {};
        msgService.save($scope.inputEmail)
				$scope.successMessage = 'Your message has been delivered to ' + msgService.getEmail();
			}
		}
	});
	
	ctrls.controller('EmailCtrl', ['$scope', function ($scope) {
		$scope.inputEmail = '';
	}]);
    
    // About child controller
    ctrls.controller('AboutCtrl', ['$scope', function ($scope) {
        $scope.about = '';
    }]);

    return ctrls;
}());

formApp.service('msgService', function () {
	  var email="";
  this.save=function(email){        
       this.email= email ;

  };

  this.getEmail=function(){

    return this.email;

  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="formApp">
    <!-- Reference the application level controller for the title model. -->
    <div ng-controller="TitleCtrl" ng-model="title">
      <h1>{{title}}</h1>
      <form name="myForm" ng-submit="submitForm(myForm.$valid)" ng-controller="FormCtrl">
        <!-- Input with validation -->
        <div>
          <label for="userEmail">Contact email:</label>
          <br />
          <input type="email" name="userEmail" ng-model="inputEmail" required="" />
          <span class="required" ng-show="submitted && myForm.userEmail.$error.email">* Email format is wrong</span>
          <span class="required" ng-show="submitted && myForm.userEmail.$error.required">* Email is required</span>
        </div>
        <div>
          <label for="subject">Subject:</label>
          <br />
          <input type="text" name="subject" ng-model="correctSubject" required="" />
          <span class="required" ng-show="submitted && myForm.subject.$error.required">* A subject is required!</span>
        </div>
        <div>
          <label for="msg">Message body:</label>
          <br />
          <textarea name="msg" rows="8" ng-model="userMessage" ng-minlength="3" ng-maxlength="256" required=""></textarea>
          <span class="required" ng-show="submitted && myForm.msg.$error.minlength">* A message greater than 3 characters and less than 256 is required</span>
          <span class="required" ng-show="submitted && myForm.msg.$error.maxlength">* A message greater than 3 characters and less than 256 is required</span>
          <span class="required" ng-show="submitted && myForm.msg.$error.required">* A message is required</span>
        </div>
        <button type="submit" ng-click="submitted=true">Send Email</button>
        <p ng-bind="successMessage"></p>
      </form>
      <hr />
    </div>
  </div>

请运行这个 sn-p。

Here is the working fiddle