我有一个基于 jQuery 的 slider 来更新输入框。当 slider 移动时，输入框内容的 Angular 句柄不会更新，尽管值已更新(如图所示)
代码:
<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>
最佳答案
您需要使用 $apply 手动调用摘要循环。
实际上，AngularJS 把一件事说得很清楚了。它将仅考虑那些在 AngularJS 上下文中完成的模型更改(即更改模型的代码包含在 $apply() 中)。 Angular 的内置指令已经做到了这一点，因此您所做的任何模型更改都会反射(reflect)在 View 中。但是，如果您在 Angular 上下文之外更改任何模型，则需要通过手动调用 $apply() 将更改通知 Angular。这就像告诉 Angular 您正在更改某些模型并且它应该触发观察者以便您的更改正确传播。
slide: function(event, ui) {
$('[ng-controller="myController"]').scope().$apply(function() {
$('[ng-controller="myController"]').scope().duration = ui.values[0] + " - " + ui.values[1];
});
}
关于javascript - Angularjs - ng-model 未从 javascript 更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27417834/