Question

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

loginApp

指令：

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

当有人提交表单时，如何在点击提交按钮和我要在那里显示的所有表单数据后显示关于页面时，如何实现这一点。这是我的 plunker： http://plnkr.co/edit/D5S2c6rgycWFfsyfhN9J?p=preview

Answer 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页面必须能够调用注册函数并转到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>

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

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

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

祝你好运！

Answer 2

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

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

2 个答案:

homeDirective.js

的script.js

homeDirective.html