CODEWITHSUNDEEP
javascriptangularjsjquery-ui-sliderangular-ngmodel
Mohitt
Mohitt

Reputation: 2977

Angularjs - ng-model not getting updated from javascript

I have a jQuery based slider that updates an input box. The angular handle for the input box's content is not getting updated when slider moves though the value is updated (as shown in image)

Code:

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

Picture View

Edit 1: To investigate further, I am posting the whole code.

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

Upvotes: 1

Views: 3313

Answers (2)

msapkal
msapkal

Reputation: 8346

You would need to call a digest cycle manually using $apply.

Actually, AngularJS makes one thing pretty clear. It will account for only those model changes which are done inside AngularJS’ context (i.e. the code that changes models is wrapped inside $apply()). Angular’s built-in directives already do this so that any model changes you make are reflected in the view. However, if you change any model outside of the Angular context, then you need to inform Angular of the changes by calling $apply() manually. It’s like telling Angular that you are changing some models and it should fire the watchers so that your changes propagate properly.

slide: function(event, ui) {
  $('[ng-controller="myController"]').scope().$apply(function() {
    $('[ng-controller="myController"]').scope().duration = ui.values[0] + " - " + ui.values[1];
  });
}

PLUNKR

Upvotes: 2

Rasalom
Rasalom

Reputation: 3111

All you need to do is call $scope.$apply() in slide callback, to do it, you need to get access to controller scope. How to do it, described here: AngularJS access scope from outside js function

Main point is that when you change data from outside of angular world, you need to manually "tell" angular to update the values.

Upvotes: 0

Related Questions