Question

项目设置：

PostgreSQL数据库
NodeJS + AngularJS +语义UI应用

我试图通过填写弹出窗口中包含的表单来向视图添加一些数据。

我在按钮上使用ng-click事件初始化此弹出窗口，如下所示：

<button id="add-popup" class="primary ui button" ng-click="addPopup()">
  <i class="plus icon"></i>
</button>

然后使用以下代码块在页面上打开弹出窗口：

$scope.addPopup = function() {
  $('#add-popup').popup({
      on: 'click',
      position: 'bottom center',
      html: '<form id="addForm" class="ui form">\
               <div class="field">\
                 <label>Field 1</label>\
                 <input id="field_1" type="text">\
               </div>\
               ...
               <button onclick="$(\'#add-object\').click();" class="ui fluid positive button">Add</button>\
             </form>'
  }).popup('show');
}

没有问题。一切正常。

我填写表单输入，按下提交按钮，通过模拟页面上隐藏按钮的单击（标识为addObject）来调用名为add-object的Angular函数，如上面的代码）。

addObject函数如下所示：

$scope.addObject = function() {
  var newObject = {
      "field_1": $('#field_1', '#addForm').val(),
      ...
    };

    console.log(newObject);

    // The database interaction logic is omitted for brevity,
    // it's tested and that piece of the code works
};

我第一次填写表单时，这是console.log：

的输出

{
  "field_1": "entered text",
  ...
}

我按提交，表单提交所有内容，新对象被添加到范围。一切都按预期工作。

我第二次尝试这样做时，我得到了以下console.log输出：

{
  "field_1": "",
  ...
}

无论我输入或执行的操作，我的字段全部的值仍为空字符串。

我已经尝试过在不同的地方做一个$scope.$apply，检查整个过程发生的位置，但是从表单中获取值后它会有效地发生。

任何人都可以指出我正确的方向

为什么发生这种情况
我能做什么关于此事？

免责声明：我知道这段代码需要大量清理。这是一个项目，截止日期太紧，不能重构，在我开始研究这个项目之前已经完成了一大堆丑陋的代码损坏，所以我决定不这样做，可悲的是。

第二次提交时表单输入为空

0 个答案: