Question

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

非常感谢任何帮助！

以下是代码： html＆amp; 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");
    });

};

})

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

};

})

如何在搜索函数上构造AngularJS引导程序模态

1 个答案: