Question

我目前正在学习AngularJS，而且我正在玩ui-bootstrap。

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

例如，更新模态和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。在此，您应该有提交表单的操作。

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

1 个答案: