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

时间：2022-11-24 11:09:48

I am new to angularjs,i make a sample app ,now i want to display data on next page when form is submitted using isolated scope directive . my index.html:

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

Directive:

指示：

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

how can i make possible this when someone submit the form the about page is displayed after clicking submit button and all form data i want to display there. here is my plunker: http://plnkr.co/edit/D5S2c6rgycWFfsyfhN9J?p=preview

当有人提交表单时，如何在点击提交按钮和我希望在那里显示的所有表单数据后显示关于页面时，我怎么能做到这一点。这是我的傻瓜：http：//plnkr.co/edit/D5S2c6rgycWFfsyfhN9J?p=preview

2 个解决方案

#1

5  

So based off of what you put into plunker and looking at your code I noticed a few issues.

因此，根据您放入plunker并查看代码的内容，我注意到了一些问题。

First: You had your controller inside your directive causing none of the code within the directive to be run.

第一：你的控制器里面有你的控制器，导致指令中没有任何代码被运行。

Your Code

你的守则

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

Update Code:

更新代码：

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

Second: You need to add some way allowing your variables to talk between controllers. I used a service and passed it into both controllers

第二：你需要添加一些方法，允许变量在控制器之间进行通信。我使用了一个服务并将其传递给两个控制器

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

Third: Your HTML page had to be able to call the register function and move over to the 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>

Last: You should put your whole angular app in a self calling function like so

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

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

Here is the link to the plunk fork that I did for your code. Hopefully that all made sense.Link to Plunker

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

Good Luck!

祝你好运！

#2

0  

Use Angular Services to share data between controllers.You can use services to organize and share code across your app.

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

#1

5  

So based off of what you put into plunker and looking at your code I noticed a few issues.

因此，根据您放入plunker并查看代码的内容，我注意到了一些问题。

First: You had your controller inside your directive causing none of the code within the directive to be run.

第一：你的控制器里面有你的控制器，导致指令中没有任何代码被运行。

Your Code

你的守则

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

Update Code:

更新代码：

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

Second: You need to add some way allowing your variables to talk between controllers. I used a service and passed it into both controllers

第二：你需要添加一些方法，允许变量在控制器之间进行通信。我使用了一个服务并将其传递给两个控制器

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

Third: Your HTML page had to be able to call the register function and move over to the 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>

Last: You should put your whole angular app in a self calling function like so

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

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

Here is the link to the plunk fork that I did for your code. Hopefully that all made sense.Link to Plunker

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

Good Luck!

祝你好运！

#2

0  

Use Angular Services to share data between controllers.You can use services to organize and share code across your app.

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

标签：

相关文章