Angularjs - ng-модель не обновляется с javascript

У меня есть слайдер на основе jQuery, который обновляет поле ввода. Угловая ручка для содержания входного бокса не получает обновляется, когда ползунок перемещается, хотя значение обновляется (как показано на рисунке)Angularjs - ng-модель не обновляется с javascript

Код:

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

источник

2014-12-11 Mohitt

Вы должны были бы вызвать цикл дайджеста вручную с помощью $apply.

На самом деле, AngularJS делает одно довольно ясным. Он будет учитывать только те изменения модели, которые выполняются внутри контекста AngularJS (т. Е. Код, который меняет модели, обернут внутри $apply()). Встроенные в Angular директивы уже делают это, так что любые изменения модели, которые вы делаете, отражаются в представлении. Однако, если вы меняете какую-либо модель за пределами углового контекста, вам необходимо сообщить об Угловом изменении, вызвав $apply() вручную. Это похоже на то, что Angular говорит, что вы меняете некоторые модели, и он должен стрелять в наблюдателей, чтобы ваши изменения распространялись правильно.

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

PLUNKR

источник

2014-12-11 07:58:40

Я добавил этот $ apply фрагмент. Он не работает, вместе с ним возникает странное поведение в компоненте слайдера. Движение ползунка не отражается, когда я перетаскиваю ручки, хотя значение в #amount изменяется. – Mohitt

Я обновил комментарий, пожалуйста, проверьте. –

спасибо Mahesh :) – Mohitt

Все, что вам нужно сделать, это вызов $scope.$apply() в slide обратного вызова, чтобы сделать это, вам нужно, чтобы получить доступ к контроллеру сферы. Как это сделать, описанный здесь: AngularJS access scope from outside js function

Главное, что при изменении данных извне углового мира вам нужно вручную «рассказать» угловое значение для обновления значений.

источник

2014-12-11 08:01:10 Rasalom

Я добавил этот $ apply snippet. Он не работает, вместе с ним возникает странное поведение в компоненте слайдера. Движение ползунка не отражается, когда я перетаскиваю ручки, хотя значение в #amount изменяется – Mohitt

Angularjs - ng-модель не обновляется с javascript

ответ

Смежные вопросы