Question

我正在使用AngularJs中的模态表单。我必须根据表格中输入的内容发送不同的请求。我想更改表单的操作URL。我想要一个计算网址。当我打开模态时，我的网址未在表单操作中更新。为什么？怎么了？

这是代码

    <script>
      angular.module('plunker', ['ui.bootstrap']);
 var url = '/url/test'; // this value is calculated
      var ModalDemoCtrl = function ($scope, $modal, $log) {

          /* Note: The hard coded user object has been commented out, as 
             it is now passed as an object parameter from the HTML template.
          */
          /* $scope.user = {
              user: 'name',
              password: null
          };*/

          $scope.open = function (user) {
              $scope.user = user;
              $modal.open({
                  templateUrl: 'myModalContent.html',
                  backdrop: true,
                  windowClass: 'modal',
                  controller: function ($scope, $modalInstance, $log, user) {
                      $scope.user = user;
                      $scope.submit = function () {
                          $log.log('Submiting user info.');
                          $log.log(JSON.stringify(user));
                          $modalInstance.dismiss('cancel');
                      }
                      $scope.cancel = function () {
                          $modalInstance.dismiss('cancel');
                      };
                  },
                  resolve: {
                      user: function () {
                          return $scope.user;
                      }
                  }
              });
          };
      };  
  </script>

  <div ng-controller="ModalDemoCtrl">
      <script type="text/ng-template" id="myModalContent.html">
          <div class="modal-header">
              <h3>I'm a modal!</h3>
          </div>
          <!--HERE I WANT TO CHANGE THE ACTION URL ACCORDING TO THE USER -->
          <form action="{{'/app/'+url}}" ng-submit="submit()">
            <div class="modal-body">
              <label>User name</label>
              <input type="text" ng-model="user.user" />
              <label>Password</label>
              <input type="password" ng-model="user.password" />
            </div>
            <div class="modal-footer">
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
                <input type="submit" class="btn primary-btn" value="Submit" />
            </div>
          </form>
      </script>

      <button class="btn" ng-click="open({user: 'username', password: 'password'})">Open me!</button>
      <div ng-show="user.password">Got back from modal: {{ user | json}}</div>
  </div>

这是plunker（第57行）感谢

Answer 1

您尚未在url

中定义“modelDemoCtrl”

请在此处查看工作演示http://plnkr.co/edit/Ddb13hqqrrdCdA5SuRyS?p=preview

<强> TEMPLATE：

 <script type="text/ng-template" id="myModalContent.html">
      <div class="modal-header">
          <h3>I'm a modal!</h3>
          <p>Your Url: <strong>{{url.user}}</strong></p> 
      </div>
      <!--HERE I WANT TO CHANGE THE ACTION URL ACCORDING TO THE USER -->
      <form action="{{'/app/'+url.user}}" ng-submit="submit()">
        <div class="modal-body">
          <label>User name</label>
          <input type="text" ng-model="user.user" />
          <label>Password</label>
          <input type="password" ng-model="user.password" />
        </div>
        <div class="modal-footer">
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            <input type="submit" class="btn primary-btn" value="Submit" />
        </div>
      </form>
  </script>

<强> JS：

 $scope.open = function (user) {
              $scope.user = user;
              $modal.open({
                  templateUrl: 'myModalContent.html',
                  backdrop: true,
                  windowClass: 'modal',
                  controller: function ($scope, $modalInstance, $log, user) {
                      $scope.user = user;
                      $scope.url = $scope.user;
                      $scope.submit = function () {
                          $log.log('Submiting user info.');
                          $log.log(JSON.stringify(user));
                          $modalInstance.dismiss('cancel');
                      }
                      $scope.cancel = function () {
                          $modalInstance.dismiss('cancel');
                      };
                  },
                  resolve: {
                      user: function () {
                          return $scope.user;
                      }
                  }
              });
          };

为什么我在模态中的表单操作不会更新？

1 个答案: