Angular-ui 以及如何绑定模态表单输入

Question

我目前正在学习 AngularJS，只是在玩 ui-bootstrap。

我已经创建了一个带有表单的简单模式，我正在尝试绑定到主页（调用模式的页面）上的属性。

例如，更新 modal 和 attr 中的名称。在后台更新。

无法理解为什么它不起作用。从同一个控制器调用模态框，并更新模态框内的属性。

我的模态看起来像这样：

<div ng-controller="LocationsCtrlGet">
  <div class="modal-header">
    <h3 class="modal-title">I'm a modal for {{ location.location_name }}</h3>
  </div>
  <div class="modal-body">
    <form ng-submit="save(location)" ng-model='location'>
    <div class="form-group row">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <input ng-model="location.location_name" class='form-control' placeholder='Location name'>
      ...

在我的主页中：

<div ng-controller="LocationsCtrlGet">
  {{ location.location_name }}
    <p ng-click="open('small')" class='btn btn-default btn-sm'><i class='fa fa-edit fa-sm'></i>Edit</p>
</div>

还有控制器：

app.controller('LocationsCtrlGet', ['$scope', '$routeParams', '$modal', 'Location',
  function($scope, $routeParams, $modal, Location) {

  $scope.location = Location.get({id: $routeParams.id}, function(data) {
    $scope.loading = false
  })

  $scope.open = function (size) {
    var modalInstance = $modal.open({
      templateUrl: 'partials/locations/editLocationModal',
      controller: ModalInstanceCtrl,
      size: size
    });
    ...

如果我将表单放在主 html 中，它可以正常工作。而且，就像我说的那样，它会更新模式中的属性。

Answer 1

您应该将字段绑定到您的 ModalInstanceCtrl 的范围，而不是您的 LocationsCtrl。

在您的模态视图中，您有 ng-controller 指令和控制器定义的 $modal.open() 方法。删除 ng-controller 指令。

<div>
  <div class="modal-header">
    <h3 class="modal-title">I'm a modal for {{ location.location_name }}</h3>
  </div>
  <div class="modal-body">
    <form ng-submit="save(location)" ng-model='location'>
    <div class="form-group row">
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <input ng-model="location.location_name" class='form-control' placeholder='Location name'>
  ...

在您的示例中，您没有发布您的 ModalInstanceCtrl。在此，您应该具有提交表单的操作。