使用jQuery滑块angularjs范围值不变

Question

我正在使用angularjs做一个项目，在这个项目中我正在使用一个jquery滑块。 使用此滑块，我必须更改在一个$ scope数组中定义的selectbox值，但它不起作用。

这是一个示例代码，我只是想知道如何基于jquery滑块更改作用域值

HTML代码

<html lang="en" ng-app="myapp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/layout.css" type="text/css" />
<script src="<?php echo base_url(); ?>assets/angular/angular.js" type="text/javascript"/></script>
</head>
<body ng-controller='CompositionController'>


              <div class="thinkness-bar">
                                                <div class="popupslider">
                                                    <div id="testslider" class="jquery-slider"></div>                                                     
                                                    <input type="text" id="testamount" class="progressnumber" value="500"  >
                                                    <input type="hidden" id="testhdndfaltThick" name="testhdndfaltThick" value="50" /> 
                                                </div>
                                            </div>
           </div>
           {{value}}

</body>

<script src="<?php echo base_url(); ?>assets/includes/jquery.1.11.1.min.js"></script>
<script src="<?php echo base_url(); ?>assets/includes/jquery.1.10.2.js"></script> 
<script src="<?php echo base_url(); ?>assets/includes/jquery.ui.1.11.1.js"></script> 
</html>

脚本代码

<script>
var myapp = angular.module('myapp', []);

myapp.controller('CompositionController', function ($scope,$http) 
{
    $scope.value =0 
     var sliderValue = [2,3,5,7,8,10,11,13,15,18,19];
    $("#testslider").slider({ 
                range: "min", 
                value: 8, 
                min: 1, 
                max: 20, 
                slide: function(event, ui) 
                { 
                  if(sliderValue.indexOf(ui.value)===-1 ) return false;
                         $("#testamount" ).val( ui.value);

                  } 
                }); 
               $( "#testamount" ).val( $( "#testslider" ).slider( "value" ) );  
               $scope.value =$( "#testamount" ).val(); 
});


</script>

提前致谢。

Answer 1

由于您是在jquery事件中设置值，因此angular不知道某些内容已更新，您需要调用

$scope.$apply();

设置$ scope.value之后。

PS：我真的希望这只是一个测试，而不是实际的生产代码。

编辑：

好吧，这里有一些问题：body标签中缺少ng-app，我想您打算用滑块更改值...

我做了个笨蛋：

使用jQuery滑块angularjs范围值不变

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-04-21 09:20:17

使用jQuery滑块angularjs范围值不变

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-04-21 09:20:17

解决方案1
1 已采纳 2015-04-21 09:20:17