如何将 bootstrap ui 模态输入与 html 页面与 angular 连接起来

Question

我有两页html。一个是主页，另一个是模态页面。我使用一个 angular 应用程序在它们之间进行连接。我在模态页面中获得输入，我想在主页中显示它。我不知道该怎么做，虽然我认为它可能适用于服务。

主页：

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
    <script src="app.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div ng-controller="ModalDemoCtrl">
    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
    <table ng-controller="tableCtrl">
        <thead>
        <th class="col-lg-3">Username</th>
        <th class="col-lg-3">Password</th>
        <th class="col-lg-3">First name</th>
        <th class="col-lg-3">Last name</th>
        </thead>
        <tbody>
            <tr ng-repeat="User in Users">
                <td class="col-lg-3">{{User.userN}}</td>
                <td class="col-lg-3">{{User.PassW}}</td>
                <td class="col-lg-3">{{User.Name}}</td>
                <td class="col-lg-3">{{User.LastName}}</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

模式页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
    <script src="app.js"></script>
    <link href="vandors/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form ng-app="ui.bootstrap.demo" ng-controller="ModalDemoCtrl" ng-submit="ok()">
        <div class="modal-header">
            <h3>users</h3>
        </div>
        <div class="modal-body">
            <div class="panel-body">
                <div class="form-group">
                    <label>Username : </label>
                    <input type="text" placeholder="Ariel73" ng-model="userN">
                </div>
                <div class="form-group">
                    <label>Password : </label>
                    <input type="text" placeholder="Aa123456" ng-model="PassW">
                </div>
                <div class="form-group">
                    <label>First name : </label>
                    <input type="text" placeholder="Ariel" ng-model="Name">
                </div>
                <div class="form-group">
                    <label>Last name : </label>
                    <input type="text" placeholder="Livshits" ng-model="LastName">
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-success">submit</button>
            </div>
        </div>
    </form>
</body>
</html>

应用页面：

app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
app.controller('ModalDemoCtrl', function ($scope, $modal) {

    $scope.open = function () {

        var modalInstance = $modal.open({
            templateUrl: 'table.html',
            controller: 'ModalInstanceCtrl',
        });
    };
});

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
    $scope.ok = function () {
        $modalInstance.close($scope);
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});


app.controller('tableCtrl',function($scope){
    $scope.Users = [
        {'userN' : 'Ariel', 'PassW' : 'Aa123456', 'Name' : 'Ariel', 'LastName' : 'Livshits'},
        {'userN' : 'Ariel', 'PassW' : 'Aa123456', 'Name' : 'Ariel', 'LastName' : 'Livshits'},
        {'userN' : 'Ariel', 'PassW' : 'Aa123456', 'Name' : 'Ariel', 'LastName' : 'Livshits'}
    ];
    $scope.addRow = function () {
        $scope.Users.push({'userN' : $scope.userN, 'PassW' : $scope.PassW, 'Name' : $scope.Name, 'LastName' : $scope.LastName});
        $scope.userN = '';
        $scope.PassW = '';
        $scope.Name = '';
        $scope.LastName = '';
    }
});

Answer 1

Angular 与单页应用程序布局一起使用，似乎应用程序 (ng-app) 必须只存在一个页面，并且它可能使用多个部分或模板。通常主页包含网页布局（页眉、导航栏、内容、页脚）和模板根据当前状态切换内容（由 url 管理）在您的示例中，主页将为 "single page"，模态页面将为 s partial/template。该模板可以作为 table.html 的响应向服务器请求，也可以使用 <script type='text/ng-template' id='table.html'>.

在主页中定义为模板。

app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
app.controller('AppCtrl', function($scope, $modal, $log) {
  $scope.Users = [{
    'userN': 'Ariel',
    'PassW': 'Aa123456',
    'Name': 'Ariel',
    'LastName': 'Livshits'
  }, {
    'userN': 'Ariel',
    'PassW': 'Aa123456',
    'Name': 'Ariel',
    'LastName': 'Livshits'
  }, {
    'userN': 'Ariel',
    'PassW': 'Aa123456',
    'Name': 'Ariel',
    'LastName': 'Livshits'
  }];
  
  $scope.open = function() {

    var modalInstance = $modal.open({
      templateUrl: 'table.html',
      controller: 'ModalInstanceCtrl'
    });
    modalInstance.result.then(function(newUser) {
      $scope.Users.push(newUser);
    }, function() {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
});

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

app.controller('ModalInstanceCtrl', function($scope, $modalInstance) {
  $scope.ok = function() {
    $modalInstance.close({
        'userN': $scope.userN,
        'PassW': $scope.PassW,
        'Name': $scope.Name,
        'LastName': $scope.LastName
      });
  };

  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
  };
});

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
  <script src="app.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div ng-controller="AppCtrl">
    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
    <table>
      <thead>
        <th class="col-lg-3">Username</th>
        <th class="col-lg-3">Password</th>
        <th class="col-lg-3">First name</th>
        <th class="col-lg-3">Last name</th>
      </thead>
      <tbody>
        <tr ng-repeat="User in Users">
          <td class="col-lg-3">{{User.userN}}</td>
          <td class="col-lg-3">{{User.PassW}}</td>
          <td class="col-lg-3">{{User.Name}}</td>
          <td class="col-lg-3">{{User.LastName}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script type="text/ng-template" id="table.html">
    <form ng-submit="ok()">
      <div class="modal-header" >
        <h3>users</h3>
      </div>
      <div class="modal-body">
        <div class="panel-body">
          <div class="form-group">
            <label>Username :</label>
            <input type="text" placeholder="Ariel73" ng-model="userN">
          </div>
          <div class="form-group">
            <label>Password :</label>
            <input type="text" placeholder="Aa123456" ng-model="PassW">
          </div>
          <div class="form-group">
            <label>First name :</label>
            <input type="text" placeholder="Ariel" ng-model="Name">
          </div>
          <div class="form-group">
            <label>Last name :</label>
            <input type="text" placeholder="Livshits" ng-model="LastName">
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit"  class="btn btn-success">Submit</button>
        </div>
      </div>
    </form>
  </script>
</body>

</html>

如何将 bootstrap ui 模态输入与 html 页面与 angular 连接起来

how to connect between bootstrap ui modal input to html page with angular

controller

angularjs

angular-ui-bootstrap

angular-services