如何在搜索功能上构建 AngularJS 引导模式答案

【问题标题】：How to structure a AngularJS bootstrap Modal on a search function如何在搜索功能上构建 AngularJS 引导模式
【发布时间】：2018-05-26 21:40:45
【问题描述】：

我正在使用 AngularJs、bootstrap、一个 API 在搜索功能按钮上返回 JSON，数据流正在工作，但是，我希望该按钮还触发引导模式弹出框，我可以在其中触发 API JSON 填充具有相关数据的模态。我对 AngularJS 和 javascript 结构比较陌生。我相信我应该能够使用单个控制器来执行此操作。我也认为我可以使用一个简单的 jquery 解决方案。鉴于我的结构，我误解或不确定如何使用此处的文档：https://github.com/angular-ui/bootstrap/tree/d7a48523e437b0a94615350a59be1588dbdd86bd/src/modal

任何帮助将不胜感激！

下面是代码： html & js:

 <body id="app" ng-app="app">
      <!-- Main view for app-->
      <div ui-view class="main-view">
          <section class="search-section" ng-if="!displayCity">
                  <div class="container">
                    <div class="row">
                                      <div class="vh-100 col-12 d-flex flex-column justify-content-center">
                              <div class="display-4 text-center"><img src="/images/logo.png"></div>

                              <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                              <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                  ...
                                </div>
                              </div>
                            </div>

                            <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 class="btn btn-danger" data-toggle="modal" data-target=".bd-example-modal-lg" style="background-color:#BE2020">Go</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </section>
</div>





var app = angular.module('app', ['ui.router', 'ui.bootstrap', 'ngAnimate', 'ngTouch']);

app.config(function($stateProvider) {
    $stateProvider
        .state('index', {
            url: '',
            templateUrl: 'home.html',
            controller: 'homeCtrl'
        })
});

app.run(['$rootScope', '$stateParams', '$http', function($rootScope, $stateParams, $http){
    //Put your API key here
    $rootScope.key = 'apiKey';

}]);

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

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


    $http({
        method: 'GET',
        url: 'apiKey',
        headers:{
            'user-key': $rootScope.key,
        },
        params: {
            'q': query 
        }
    }).then(function(response){
        console.log(response.data);
        $rootScope.displayCity = true;
    }).catch(function(response){
        console.log("something went wrong");
    });

};

})

【问题讨论】：

标签： javascript jquery angularjs json twitter-bootstrap

【解决方案1】：

Create a Id for Modal and invoke Modal inside your success function of API call through jquery. Also remove data-toggle and data-target class form HTML Page.

<body id="app" ng-app="app">
      <!-- Main view for app-->
      <div ui-view class="main-view">
          <section class="search-section" ng-if="!displayCity">
                  <div class="container">
                    <div class="row">
                                      <div class="vh-100 col-12 d-flex flex-column justify-content-center">
                              <div class="display-4 text-center"><img src="/images/logo.png"></div>

                              <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myModal">
                              <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                  ...
                                </div>
                              </div>
                            </div>

                            <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 class="btn btn-danger" style="background-color:#BE2020">Go</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </section>
</div>


var app = angular.module('app', ['ui.router', 'ui.bootstrap', 'ngAnimate', 'ngTouch']);

app.config(function($stateProvider) {
    $stateProvider
        .state('index', {
            url: '',
            templateUrl: 'home.html',
            controller: 'homeCtrl'
        })
});

app.run(['$rootScope', '$stateParams', '$http', function($rootScope, $stateParams, $http){
    //Put your API key here
    $rootScope.key = 'apiKey';

}]);

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

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


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

};

})

【讨论】：