具有模态按钮类型问题的 AngularJs 函数

Posted 2023-05-08

【中文标题】具有模态按钮类型问题的 AngularJs 函数

【英文标题】：AngularJs function with Modal button type Issue

【发布时间】：2018-05-27 22:55:43

【问题描述】：

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

JS代码：-

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");
        );

    ;
);

html 代码：-

<div class="container">
    <div class="row">
        <div class="vh-100 col-12 d-flex flex-column justify-content-center">

            <form class="mt-4" ng-submit="searchCity()">
                <div class="form-group d-flex">
                    <input id="query" type="text" placeholder="Search For Your City" class="form-control" />
                    <!-- Button trigger modal -->
                    <button type="submit" class="searchbtn btn-danger" data-toggle="modal" data-target="#myModal">
                        Go
                    </button>

                    <!-- Modal -->
                    <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Select Your City</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    ...
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
            </form>
        </div>
    </div>
</div>

【参考方案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。

【讨论】：

ng-click 不是一个糟糕的解决方案，但是，出于我的目的，我希望仍然使用提交来触发该功能。我愿意严格保持角度，但是对它来说相当新，在查看提供的 UI 模式后我感到相当困惑。我需要所有这些注射吗？您是否在任何地方看到过更简单的实现？

我不太清楚你的意思，但我添加了一个简单的演示：plnkr.co/edit/bJUyfHNlQ2KA380SoaMu。展示如何使用单个控制器，而不涉及角度动画/清理。注入方面，你只需要'ui.bootstrap'。我也不再需要第二个控制器，因为我不能 100% 确定您在寻找什么。