Question

我是AngularJS的新手，我正在努力解决这个问题。在下面的简单示例中，我正在尝试更新UI以显示jquery滑块的值（我知道有一种纯粹的Angular方法来解决这个问题，但这只是我的简化测试用例，它仍然会非常有助于我理解为什么更改$scope.slider_value不会更新视图）。我错过了什么？

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/flick/jquery-ui.css" />        
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript">

            var testApp = angular.module('testApp', []);
            testApp.controller('testCtrl', function($scope) {
                $('#slider').slider({
                    max: 1000,
                    slide: function( event, ui ) {
                        $scope.slider_value = ui.value;
                    }
                });
                $scope.slider_value = 0;
            });

        </script>
        <style>
            #slider { margin: 20px; }
            #to_update { margin: 10px; font-family: Arial; }
        </style>
    </head>
    <body ng-app="testApp">
        <div ng-controller="testCtrl">
            <div id="slider"></div>
            <div id="to_update">slider value: {{ slider_value }}</div>
        </div>
    </body>
</html>

Answer 1

您正在通过角度不知道的事件来更新范围。在这种情况下，您需要将更新包装在$apply。

中

试试这个：

slide: function( event, ui ) {
    $scope.$apply(function() {
        $scope.slider_value = ui.value;
    });
}

查看scope.$apply

上的文档

为什么即使$ scope属性更新，AngularJS绑定也不起作用？

1 个答案: