如何在搜索功能上构建 AngularJS 引导模式
Posted
技术标签:
【中文标题】如何在搜索功能上构建 AngularJS 引导模式【英文标题】：How to structure a AngularJS bootstrap Modal on a search function 【发布时间】：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");
);
;
)
【问题讨论】：
【参考方案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 引导模式的主要内容，如果未能解决你的问题，请参考以下文章