角度：如何在通过代码修改范围输入时更新值

Question

I'm pretty new to angularJS,

I have a range input, which might get it's value updated via code. I have created a ng-model for this input, and have ng-bind ed it to a <p> tag.

It works fine as long as the range input is modified by the user, but when it is updated by the code, the updated value is not getting reflected.

I have a created a fiddle: https://jsfiddle.net/cj1emb1r/16/

How can I make it work?

<div ng-app=''>
    <input type='range' min='20' max='200' ng-model="amount" id='slider'>
    <p ng-bind="amount"> </p>
    <button onclick='foo();'> Run!</button>
</div>

The function where the value is modified:

<script>
    var flag = true;
    function foo() {
        var sliderObj = document.getElementById('slider');
        var value = parseInt(sliderObj.value);
        if(value >= 200 || value <= 0) {
            flag = !flag;
        }
        if(flag) {
            sliderObj.value = value + 5;
        }
        else {
            sliderObj.value = value - 5;
        }
        console.log(value);
        setTimeout("foo()", 200);
    }
</script>`

Answer 1

For starters , I suggest you to read some articles in official developer guide documentation. And walk through tutorial , which is very useful for understanding Angular basics.

Back to your code , there are couple of fundamental things that you didn't get about Angular.js workflow. In order to control your model you should to use controllers . The amount variable that you're using as a model in slider ( via ng-model ) is kept in $scope or in your case in $rootScope , I suppose (because there are no any controllers or directives / components in your app). So, if you want to change amount value manually, you have to actually change $rootScope.amount value. But without controller and dependency injection , that attached to it, you simply can't reach $rootScope variable.

So, first of all you better define your app module and then attach controller to it, so you can manage it's $scope .

Here is my example , how to do that (with comments).

But if to speak, it is recommended by style guide to keep variables not in $scope but in controller itself. Here is how to do that.

Answer 2

Try this:

In your script , add -

var p = document.getElementsByTagName('p')[0];

after the inner if-else loop, add p.innerHTML=sliderObj.value;

Angularjs bindings can only be accessed inside angularjs controllers . Plain JavaScript doesn't recognize angularjs bindings. Hence, it doesn't change the value of p accordingly.

Answer 3

if i understand , you can call to foo

foo();

and by default set value

value = 155;

before you call foo function