为 Angular-ui 模态赋值答案

【问题标题】：Assign values to Angular-ui modal为 Angular-ui 模态赋值
【发布时间】：2016-06-14 07:40:55
【问题描述】：

我认为我的代码中有一些相当大的漏洞，因为当模态出现时，表格中的内容（当您单击一行时会产生模态）没有填充我在里面的输入框模态的。我认为我以错误的方式处理这种情况，而某些方向会很棒。

我的 JS：

var app = angular.module('peopleInformation', ['ngAnimate','ui.bootstrap']);

app.controller('myCtrl', function($scope, $http, $uibModal) {

$http.get("Assignment005.json").success(function(response){
    $scope.myData = response.People;
});

$scope.modify = function(currentData){

    var modalInstance = $uibModal.open({
        animation: true,
        templateUrl: 'myModalContent.html',
        controller:function($scope, $uibModalInstance, details){
                $scope.FirstName = details.FirstName;
                $scope.LastName = details.LastName;
                $scope.Age = details.Age;
                $scope.Nickname = details.Nickname;

            $scope.update = function () {
                $uibModalInstance.dismiss('cancel');
            };
        },
        size: 'lg',
        resolve: {
            details: function() {
                return currentData;
            }
        }   
    });

};
});

我的模态：

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Your row of data</h4>
              </div>
              <div class="modal-body" name="modelData" style="height:200px">
                  <form class="form-horizontal pull-left form-width" role="form">
                      <div class="form-group">
                        <label class="control-label col-sm-4" for="first">First Name:</label>
                        <div class="col-sm-8">
                          <input type="text" class="form-control" id="first" ng-model="FirstName">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-sm-4" for="last">Last Name:</label>
                        <div class="col-sm-8"> 
                          <input type="text" class="form-control" id="last" ng-model="LastName">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-sm-4" for="age">Age:</label>
                        <div class="col-sm-8"> 
                          <input type="text" class="form-control" id="age" ng-model="Age">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-sm-4" for="nick">Nickname:</label>
                        <div class="col-sm-8"> 
                          <input type="text" class="form-control" id="nick" ng-model="Nickname">
                        </div>
                      </div>
                  </form>
              </div>
          <div class="modal-footer">
        <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-success pull-right" data-dismiss="modal">Submit</button>
      </div>
    </div>

主 HTML 以备不时之需：

<body>
<div data-ng-app="peopleInformation" data-ng-controller="myCtrl" class="jumbotron">
  <div class="panel panel-default">
      <div class="panel-heading">Essential Information</div>
          <div class="table-responsive">
              <table class="table table-hover">
                  <thead>
                      <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Age</th>
                        <th>Nickname</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr data-ng-repeat="details in myData" data-ng-click="modify(details)">
                        <td>{{ details.FirstName }}</td>
                        <td>{{ details.LastName }}</td>
                        <td>{{ details.Age }}</td>
                        <td>{{ details.Nickname }}</td>
                      </tr>
                  </tbody>                    
              </table>
              <button type="button" class="btn btn-info pull-right" data-ng-click="new()">Add
              </button>
          </div>
      </div>
  <div ng-include="myModalContent.html"></div>
 </div>
</body>

我对使用 Angular 非常陌生，所以如果你对我来说过于简单，那将有助于澄清事情，尽管再次感谢任何帮助。

【问题讨论】：

modify 怎么叫？
在我的主要 html 中（它很庞大，所以我没有发布它，但这是电话）。它附加到我的表格的每一行，因此当您单击表格行时，会出现模式并且应该填充字段。 "data-ng-click="修改(详情)"

标签： angularjs forms modal-dialog angular-ui-bootstrap

【解决方案1】：

波纹管是角度模态实例控制器

 app.controller('ModalInstanceCtrl', function ($scope,
 $uibModalInstance, item) {

   $scope.customer = item;

   $scope.yes = function () {
     $uibModalInstance.close();   };

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

下面是调用角模态的代码

 $scope.open = function (item) {
     var modalInstance = $uibModal.open({
       animation: true,
       scope: $scope,
       templateUrl: 'myModalContent.html',
       controller: 'ModalInstanceCtrl',
       size: 'md',
       resolve: {
         item: function () {
          return item;
         }
       }
     });

     modalInstance.result.then(function (selectedItem) {
        $log.info(selectedItem);
       });
     }, function () {
       $log.info('Modal dismissed at: ' + new Date());
     });   
   };

下面是模板代码

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">Re-calculate retail price</h3>
    </div>
    <div class="modal-body">
        Margin percent of selected customer is <b>{{ customer.margin_percent }}</b> <br />
        Do you want to recalculate the retail price?
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="yes()">Yes</button>
        <button class="btn btn-warning" type="button" ng-click="no()">No</button>
    </div>
</script>

【讨论】：

模板和AngularJS模态/模态实例控制器不匹配？但是我最近开始工作了，谢谢你的回答！
templateUrl: 'myModalContent.html', controller: 'ModalInstanceCtrl', 负责模板和模态实例的匹配
感谢@Callum 的编辑。我认为您不需要将 $scope 传递给模态，因为模态控制器有单独的范围。您只需将所需的参数传递给模态实例

【解决方案2】：

我实际上在错误的地方分配了我认为的值。我移动了：

$scope.FirstName = details.FirstName;

在var modalInstance 变量之外，它们现在正在填充输入框。如果这很混乱或不标准，那么请告诉我，因为有时正确的结果并不总是正确的方法。感谢那些试图提供帮助的人，非常感谢。

【讨论】：

我认为您需要将范围传递给您的模态实例以使其工作。
$scope 被传递到控制器内部的模态实例中。请参阅： var modalInstance = $uibModal.open({ animation: true, templateUrl: 'myModalContent.html', controller:function($scope, $uibModalInstance, details)
我不是在谈论那个范围。在模态实例参数中添加一个参数，例如：scope: $scope,

【解决方案3】：

在您的 HTML 文件中，您传递不同的参数来修改函数，它应该等于 ng-repeat 指令中指定的参数。所以在这种情况下：

<tr data-ng-repeat="data in myData" data-ng-click="modify(details)">

会变成：

<tr data-ng-repeat="details in myData" data-ng-click="modify(details)">

【讨论】：

这会产生一个错误，你需要调用函数让它知道去哪里返回我相信的数据。
再次，这是我发布旧代码的错，我实际上修复了上述问题但忘记更新，我现在会这样做，但是我认为我已经按照我的回答解决了我自己的问题下面，非常感谢您的帮助，非常感谢。