Angularjs - ng-model 未从 javascript 更新答案

【问题标题】：Angularjs - ng-model not getting updated from javascriptAngularjs - ng-model 未从 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>

【问题讨论】：

标签： javascript angularjs jquery-ui-slider angular-ngmodel

【解决方案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

【讨论】：

我添加了这个 $apply sn-p。它不起作用，随之而来的是滑块组件中出现了奇怪的行为。尽管#amount 中的值发生了变化，但当我拖动手柄时，滑块的移动并未反映出来。

【解决方案2】：

您需要做的就是在slide 回调中调用$scope.$apply()，为此，您需要访问控制器范围。怎么做，在这里描述：AngularJS access scope from outside js function

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

【讨论】：

我添加了这个 $apply sn-p。它不起作用，随之而来的是滑块组件中出现了奇怪的行为。尽管#amount 中的值发生了变化，但当我拖动手柄时，滑块的移动不会反映出来