Angularjs -ng-模型没有从javascript中更新
Angularjs -ng-模型没有从javascript中更新
提问于 2014-12-11 07:54:22
我有一个基于jQuery的滑块，可以更新输入框。当滑块移动时，输入框的内容的角度句柄不会被更新(如图像所示)。
码
<form ng-app="myApp" ng-controller="myController" ng-submit="readData()" >
<input type="text" id="amount" value="3-7" ng-model="duration" ng-init="duration='3-7'" >
<button type="submit" value="Submit">Submit</button>
</form>
<div id="slider-range">
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 15,
values: [ 3, 7 ],
slide: function( event, ui ) {
$( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
}
});
});
</script>
</div>
<script type="text/javascript" >
var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $http, $templateCache, $interval, $timeout) {
$scope.readData = function () {
alert($scope.duration); // always show the init value i.e. 3-7
};
});
</script>图片
编辑1：为了进一步研究，我将发布整个代码。
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<title></title>
</head>
<body >
<form ng-app="myApp" ng-controller="myController" ng-submit="readData()" >
<input type="text" id="amount" value="3-7" ng-model="duration" ng-init="duration='3-7'" >
<button type="submit" value="Submit">Submit</button>
</form>
<div id="slider-range">
<script>
</script>
</div>
<script type="text/javascript" >
var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $http, $templateCache, $interval, $timeout) {
$scope.readData = function () {
alert($scope.duration);
};
});
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 15,
values: [ 3, 7 ],
slide: function( event, ui ) {
$( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
}
});
});
</script>
</body>回答 2
Stack Overflow用户
回答已采纳
发布于 2014-12-11 07:58:40
您需要使用$apply手动调用摘要周期。
实际上，AngularJS明确了一件事。它将只考虑那些在AngularJS上下文中完成的模型更改(即更改模型的代码包装在$apply()中)。角的内置指令已经这样做了，所以您所做的任何模型更改都会反映在视图中。但是，如果在角上下文之外更改任何模型，则需要手动调用$apply()通知角。这就像告诉角，你正在改变一些模型，它应该激发观察者，以使你的变化正确传播。
slide: function(event, ui) {
$('[ng-controller="myController"]').scope().$apply(function() {
$('[ng-controller="myController"]').scope().duration = ui.values[0] + " - " + ui.values[1];
});
}PLUNKR
Stack Overflow用户
发布于 2014-12-11 08:01:10
您所需要做的就是在$scope.$apply()回调中调用slide，为此，您需要访问控制器作用域。如何做到这一点，在这里描述：来自外部js函数的AngularJS访问范围
要点是，当您从角世界之外改变数据时，您需要手动“告诉”角来更新这些值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27417834
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号