大佬教程收集整理的这篇文章主要介绍了javascript – 使用URL双向绑定获取params和Form值(选项和滑块)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
目前,我可以通过$LOCATIOn.$$搜索来获取GET参数.
但是,我仍然不知道如何在以下情况下对URL和FORM进行双向绑定.
如下面的演示图片,当用户更新FORM元素时,相应的URL应为：https：//lazyair.co/en/user/quick_search/index#？from = TOKYO& to = TAIPEI& undepart = 2016/06/03/03 〜2016/06/06&安培;回报率= 2016/06/08〜2016/06/11安培; CHART_TYPE =柱&安培; depart_slider = 10：00〜24：00
演示页面：https://lazyair.co/en/user/quick_search/index
Sliderbar指令JavaScript代码
'use Strict';
quick_search_app.directive('ionslider',function($timeout){
var get_hour_minute,getHHMMformat,isDepartureATinInterval;
get_hour_minute = function(value) {
var hours,minutes;
hours = Math.floor(value / 60);
minutes = value - (hours * 60);
if (hours.length === 1) {
hours = '0' + hours;
}
if (minutes.length === 1) {
minutes = '0' + minutes;
}
return [hours,minutes];
};
getHHMMformat = function(values) {
var hours,minutes;
hours = values[0].toString();
minutes = values[1].toString();
if (hours.length === 1) {
hours = '0' + hours;
}
if (minutes.length === 1) {
minutes = '0' + minutes;
}
return hours + ':' + minutes;
}
isDepartureATinInterval = function(departure_at,slider){
var t = new Date(Date.parse(departure_at))
var HHMM_in_minutes = t.getUTCHours()*60 + t.getminutes();
return slider.from <= HHMM_in_minutes && slider.to >= HHMM_in_minutes;
}
var updateFlighSeries = function(slider,flight_series) {
$.each(flight_series,function() {
var current_series = this;
angular.forEach(current_series.data,function(value,key) {
if(isDepartureATinInterval(value.departure_at,slider)){
this.visible = true ;
}else{
this.visible = false ;
}
},current_series);
});
}
return{
reStrict:'AE',scope: false,controller: 'quick_search_ctrl',link:function(scope,element,attr,ctrl){
$(element).ionRangeSlider({
hide_min_max: true,keyboard: true,min: 0,max: 1440,from: 0,to: 1440,type: 'double',step: 30,prefix: "",chartConfig: element.attr("chart-config"),grid: true,prettify: function (value) {
return getHHMMformat(get_hour_minute(value));
},onChange: function(slider) {
var _this = this;
updateFlighSeries(slider,scope[_this.chartConfig].series)
angular.forEach(scope.chart_names,function(chart_cfg_@R_944_8313@{
scope.$apply(function () {
scope.loWestFlights[chart_cfg_name] = angular.copy(scope.filterLoWestPrice(scope[chart_cfg_name]))
console.log(scope.loWestFlights[chart_cfg_name])
});
},scopE)
}
});
}
}
});
HTML
SELEct.SELEctpicker{:theme => "SELEct2","ng-disabled" => "disabled","ng-model" => "from",:name => "from",:theme => "SELEct2","ng-change"=>"updateDeparture(from)",:style => "width: 200px;",:required => "" }
SELEct-match{ "ng-cloak"=>"",:placeholder => t("from") } {{$SELEct.SELEcted.t_name}} {{$SELEct.SELEcted.namE}}SELEct.SELEctpicker{"ng-disabled" => "disabled","ng-model" => "to",:name => "to","ng-change"=>"updateArrival(to)",:required => ""}
SELEct-match.SELEctpicker{"ng-cloak"=>"",:placeholder => t("to")} {{$SELEct.SELEcted.t_name}} {{$SELEct.SELEcted.namE}}SELEct-choices{:repeat => "node in arrivals | filter: $SELEct.search" }
t_name | highlight: $SELEct.search">SELEct.search"> url params在$rootScope.Scope#$digest循环中清除
我在$LOCATIOnChangesuccess中放了一个断点,发现在$rootScope.Scope#$digest cycle中清除了url params
app.run(function ($rootScopE) {
$rootScope.$on('$LOCATIOnChangesuccess',function () {
debugger
console.log('$LOCATIOnChangesuccess changed!',new Date());
});
});
双向绑定不适用于指令
双向绑定不适用于指令,
实际上,双向绑定适用于View,但不适用于URL参数
DEMO第http://133.130.101.114:3000/en/user/quick_search/index页
controller(注册departChartName并用输入框显示其值)
$scope.departChartName = "yoyoyo"
urlBinder.bind($scope,"departChartName","DPNAME")
滑块指令
app.directive('ionslider',function($timeout){
return{
reStrict:'AE',ctrl){
$(element).ionRangeSlider({
chartName: element.attr("chart-name"),onChange: function(slider) {
scope[this.chartName] = slider.from+"~"+slider.to
scope.$apply();
}
});
}
}
});
angular.module('app').service('urlBinder',['$LOCATIOn',function($LOCATIOn) {
this.bind = function(
scope,// angular scope
varName,// String : name of the variable on the scope to bind to
urlParamname // String : name of the url parameter to bind to
) {
// when scope variable changes,update the URL
var unhookUrlupdater = scope.$watch(varName,function(newvalue) {
$LOCATIOn.search(urlParamname,newvalue);
});
// when the URL changes,update the scope variable
var unhookScopeupdater = scope.$on('$LOCATIOnChangesuccess',function() {
var value = $LOCATIOn.search()[urlParamname];
if (!angular.equals(scope[varName],value)) {
scope[varName] = value;
}
});
// return a function that can be called to remove the bindings
return function() {
unhookUrlupdater();
unhookScopeupdater();
};
};
}]);
如果你绑定的东西不在范围内,你也可以用getter / setter函数而不是varName做同样的事情：
angular.module('app').service('urlBinder',function($LOCATIOn) {
this.bind = function(scope,getter,setter,urlParamname) {
var unhookUrlupdater = scope.$watch(getter,newvalue);
});
var unhookScopeupdater = scope.$on('$LOCATIOnChangesuccess',function() {
var value = $LOCATIOn.search()[urlParamname];
if (!angular.equals(getter(),value)) {
setter(value);
}
});
return function() {
unhookUrlupdater();
unhookScopeupdater();
};
};
}]);
在你的控制器中：
var someVariable;
urlBinder.bind(
$scope,function() { return someVariable; },function(value) { someVariable = value; },'url-name');
以上是大佬教程为你收集整理的javascript – 使用URL双向绑定获取params和Form值(选项和滑块)全部内容，希望文章能够帮你解决javascript – 使用URL双向绑定获取params和Form值(选项和滑块)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。