Question

我有一个基于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>

图片 View

修改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>

Answer 1

您需要使用$apply手动调用摘要周期。

实际上，AngularJS非常清楚。它将仅考虑在AngularJS上下文中完成的那些模型更改（即更改模型的代码包含在$apply()内）。 Angular的内置指令已经这样做，因此您所做的任何模型更改都会反映在视图中。但是，如果更改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];
  });
}

<强> PLUNKR

Answer 2

您需要做的就是在$scope.$apply()回调中调用slide，为此，您需要访问控制器范围。如何操作，如下所述：AngularJS access scope from outside js function

要点是，当您从角度世界外部更改数据时，需要手动“告诉”角度来更新值。

Angularjs - ng-model没有从javascript更新

2 个答案: