Question

我试图在按钮上触发搜索功能，但有一个模态弹出窗口，所以我可以使用angular来格式化JSON。模态功能有效，但要触发我的功能，我需要按钮type =“submit”来触发ng-submit。但是，当我更改按钮类型时，这会拉动JSON但会阻止模态。还有其他方法可以触发提交吗？关于如何更好地构建这个的任何建议？或者，如果存在我可能需要的依赖项？谢谢

JS代码： -

db.query('SELECT username, kingname, email FROM users WHERE username = ? OR kingname = ? OR email = ?', [username, kingname, email], function(err, rows){
    if(err) {
      console.error(err);
      return res.redirect('/');
    } else {
      var rowLength = rows.length;
      var duplicateFields = [];
      for (var i = 0; i < rowLength; i++){
        var row = rows[i];
        if(row.username == username) {
          duplicateFields.push('username');
        }

        if (row.kingname == kingname) {
          duplicateFields.push('kingname');
        }

        if (row.email == email) {
          duplicateFields.push('username');
        }
      }
      if (duplicateFields.length) {
         console.error('Duplicate fields: ', duplicateFields.join(','));
         req.flash('error', duplicateFields.join(',') + ' are already taken'); // obviously, you can adjust this however you want
         return res.redirect('/')
      } else {
         res.render('/'); // or whatever
      }
    }
  });

HTML代码： -

app.controller('homeCtrl', function($rootScope, $stateParams, $http) {
    $rootScope.home;
    $rootScope.displayCity = false;
    $stateParams.city_id;

    $rootScope.searchCity = function() {
        $rootScope.displayCity = true;
        let query = $('#query').val();

        $http({
            method: 'GET',
            url: 'apiUrl',
            headers: {
                'user-key': $rootScope.key,
            },
            params: {
                'q': query
            }
        }).then(function(response) {
            console.log(response.data);
            $rootScope.displayCity = true;
            $("#myModal").show()


        }).catch(function(response) {
            console.log("something went wrong");
        });

    };
});

Answer 1

这看起来像jQuery和Angular之间没有同步的问题。我的建议是不要尝试混合两个库。他们的方法不同，他们在应用程序的整个生命周期中都会导致类似这样的奇怪事情。 AngularJS确实使用了jQuery的一个子集，您可以阅读更多关于here的内容。

我的建议是考虑实施UI-Bootstrap's modal。我使用他们的演示进行了快速的健全性检查，将按钮更改为提交类型不会改变模态功能。

这是他们提供的基本模态演示的精简版，只有一个控制器：https://plnkr.co/edit/bJUyfHNlQ2KA380SoaMu

如果您不想使用建议的路线，可能有效的另一个选项（我尚未验证此理论）将改为使用ng-click：

<button type="button" ng-click="searchCity()"
        class="searchbtn btn-danger"
        data-toggle="modal"
        data-target="#myModal">

根据你发布的内容，除了上面提到的内容之外，我没有看到任何理由不接受这种方法，但是说，这样做之前已经回顾了这个问题的答案：differences between ng-submit and ng-click。

AngularJs函数与模态按钮类型问题

1 个答案: