使用隔离范围指令在其他页面上提交后如何显示表单数据？答案

【问题标题】：How do i can show form data after submit on other page using isolated scope directive?使用隔离范围指令在其他页面上提交后如何显示表单数据？
【发布时间】：2015-08-29 15:53:43
【问题描述】：

我是 angularjs 的新手，我制作了一个示例应用程序，现在我想在使用隔离范围指令提交表单时在下一页上显示数据。我的 index.html：

 <body ng-controller="mainController">
 <nav class="navbar navbar-default">
  <div class="container">
   <div class="navbar-header">
     <a class="navbar-brand" href="/">Angular Routing Example</a>
  </div>
   <ul class="nav navbar-nav navbar-right">
      <li><a href="#home"><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>
   </nav>
 <div id="main">
    <!-- angular templating -->
    <!-- this is where content will be injected -->
   <div ui-view></div>
</div>
</body>

指令：

  var scotchApp = angular.module('scotchApp');

  scotchApp.directive('homeData', function() {
   return {
      scope: {
             info: '=fo'
             },
      templateUrl: 'homeDirective.html'
          }

 scotchApp.controller('MyFormCtrl', [function() {

      this.user = {
                  name: '',
                  email: ''
                 };

      this.register = function() {
          // console.log('User clicked register', this.user);
           alert(this.user.name + "-- " + this.user.email);
          $scope.name = this.user.name;
       };
     }]);
   })

当有人提交表单时，我如何才能做到这一点，单击提交按钮后会显示关于页面以及我想在此处显示的所有表单数据。这是我的 plunker： http://plnkr.co/edit/D5S2c6rgycWFfsyfhN9J?p=preview

【问题讨论】：

标签： angularjs forms angularjs-directive

【解决方案1】：

因此，根据您在 plunker 中添加的内容并查看您的代码，我发现了一些问题。

首先：您将控制器放在指令中，导致指令中的任何代码都不会运行。

你的代码

       var scotchApp = angular.module('scotchApp');
       scotchApp.directive('homeData', function() {
       return {
            scope:{
              info:'=fo'
            },
         templateUrl: 'homeDirective.html'
        }
         scotchApp.controller('MyFormCtrl', [function() {

          this.user = {
                name: '',
              email: ''
            };

          this.register = function() {
          // console.log('User clicked register', this.user);
              alert(this.user.name+ "-- " +this.user.email);
          $scope.name=this.user.name;
          };
          }]);
       })

更新代码：

var scotchApp = angular.module('scotchApp');
       scotchApp.directive('homeData', function() {
       return {
            scope:{
              info:'=fo'
            },
         templateUrl: 'homeDirective.html'
        };

          });
          scotchApp.controller('MyFormCtrl', [function() {

          this.user = {
                name: '',
              email: ''
            };

          this.register = function() {
          // console.log('User clicked register', this.user);
              alert(this.user.name+ "-- " +this.user.email);
          $scope.name=this.user.name;
          };
          }]);

第二：你需要添加一些方法让你的变量在控制器之间交流。我使用了一项服务并将其传递给两个控制器

homeDirective.js

scotchApp.controller('MyFormCtrl', ['$scope', 'userService', function($scope, userService) {
         $scope.userService = userService;
          $scope.user = {
                name: '',
              email: ''
            };

          $scope.register = function() {
              //sets the variables within the service
              $scope.userService.setUserName($scope.user.name);
              $scope.userService.setUserEmail($scope.user.email);
              alert($scope.userService.getUserName() + "-- " + $scope.userService.getUserEmail());
          };
          }]);
          //Service to be passes to the controllers
          scotchApp.service('userService', function(){
            var userService = {
              user: {
                'name': '',
                'email': ''
              },
              getUser: function(){
                return userService.user;
              },
              getUserName: function(){
                return userService.user.name;
              },
              getUserEmail: function(){
                return userService.user.email;
              },
              setUserName: function(name){
                userService.user.name = name;
              },
              setUserEmail: function(email){
                userService.user.email = email;
              },
            };
            return userService;

          });

script.js

scotchApp.controller('aboutController', ['$scope', 'userService', function($scope, userService) { 
               $scope.userService = userService;
               $scope.user = $scope.userService.user; 
               $scope.message = 'Look! I am an about page.'; 
           }]);

第三：您的 HTML 页面必须能够调用 register 函数并移动到 about 页面。

homeDirective.html

<div class="jumbotron text-center" >
  <h1>Home Page</h1>
  <p>{{ message }}</p>
  <form name="myForm" ng-controller="MyFormCtrl as ctrl">
    Name: <input type="text" class="form-control" ng-model="user.name">
    Email: <input type="email" class="form-control" ng-model="user.email">
    <br/>
    <a type="submit" ng-href="#about">
      <button ng-click="register();" type="submit">Register</button>
    </a>
  </form>
</div>

最后：你应该把你的整个 Angular 应用程序放在一个像这样的自调用函数中

(function(){
     var app = angular.module('app'[]);
     //more code
})();

这是我为您的代码所做的 plunk fork 的链接。希望这一切都有意义。Link to Plunker

祝你好运！

【讨论】：

@danial 我们可以在 homeData 指令中也使用隔离范围吗？
所以'userService'是传递给其他作用域的隔离作用域。它拥有包含在自身内部的所有变量，并使用方法来操纵这些变量。如果您愿意，您可以在服务中创建一个名为 users 的数组，并允许添加多个用户，或者您可以将其与一个用户隔离。但这允许您在应用程序的整个生命周期内调用所有用户数据，只要您将其传递到指令和/或控制器中。
@Danial 谢谢，但我说的是简单的隔离范围指令，我们可以使用添加 return { scope:{ info:'=fo' } 到表单指令而不使用任何服务？
@Hassan 因此，问题在于您的 about 页面位于无法访问该变量的控制器中（没有服务或 rootScope 访问权限）。你必须以某种方式通过它。你的指令可以访问它，任何可以访问应用程序范围的东西都可以访问它，但是关于页面控制器的范围与指令的范围不同。您需要某种方式将两者通信在一起，否则当关于页面正在寻找您的用户对象时，它不会找到它，因为它在您的关于页面范围内未定义。
@Hassan 添加到我正在咆哮的内容中，如果该指令在 about 页面控制器的范围内，那么它可以工作。

【解决方案2】：

使用 Angular Services 在控制器之间共享数据。您可以使用服务在您的应用中组织和共享代码。

【讨论】：

如果我们只能使用一个控制器进行指令，是否可以不使用服务？
你可以使用$rootScope。
但是为关于页面制作控制器，因为你需要它在关于页面上。为每个页面制作单独的控制器是很好的做法。并通过服务共享数据。