how to pass dynamic value from angular to jquery script

Question

This is my script in which I included in my html code-

<div class="progress-bar"></div>
<script type="text/javascript">

  $('.progress-bar').gradientProgressBar({
      value: $(this).attr('$scope.moodvalue'),
      size: 400,
      fill: {
          gradient: ["red", "green", "yellow"]
      }
  });
</script>
</div>

and I am Passing $scope.moodevalue from angular code. But as I am getting $scope.moodvalue = 0.21, but the change is not appearing on my progress bar.

please help me, how to pass dynamic value to script.

Thanks in Advance.

<div class="progress-bar"></div> <script type="text/javascript"> $('.progress-bar').gradientProgressBar({ value: 0.75, size: 400, fill: { gradient: ["red", "green", "yellow"] } }); </script> this only I included in my html page, but here in script value like it is 0.75 I want to pass dynamic value which I am setting in my angular code as $scope.moodvalue. but if I am passing manual like here 0.75 its showing color change in status bar but when I am passing $scope.moodvalue which keeps changing, its not reflectin. — Piyu
– Piyu, Commented Feb 22, 2017 at 8:40

Pengyy · Accepted Answer · 2017-02-22 09:01:02Z

0

use angular.element().scope() to get the values. and ng-change to update the value. refer this.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script>
        function test() {
          var scope = angular.element($("#testInput")).scope();
          $(".test")[0].innerText = scope.test;
        }
        
        $(document).ready(function() {
          test();            
        });
        
    </script>
    <script>
    var app = angular.module('app', []);
    
    app.controller('myCtrl', function($scope) {
        $scope.test = '111';

        $scope.change = function() {
            test();
        }
    });
    </script>
</head>
<body>
    <div class="test"></div>
    <div ng-app="app">
    <div ng-controller="myCtrl">
        <input id="testInput" type="text" ng-change="change()" ng-model="test" />
    </div>
    </div>    
</body>
</html>

answered Feb 22, 2017 at 9:01

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Piyu Over a year ago

Pengyy- Thank you it worked for me. But one solution will also work - if I move my script to angular code where I am getting my dynamic $scope.moodvalue.

Pengyy Over a year ago

@Piyu you can build a directive, put your processbar into it， and pass the $scope.moodvalue into directive by directive‘s parameter.

user4858836 · Accepted Answer · 2017-02-22 09:18:01Z

0

try this:

html:

<input type="test" ng-model="testValue"/>

javascript:

$('.progress-bar').gradientProgressBar({  
  value: $scope.testValue,
  size: 400,
  fill: {
      gradient: ["red", "green", "yellow"]
  }

});

answered Feb 22, 2017 at 9:18

user4858836

477 bronze badges

Collectives™ on Stack Overflow

how to pass dynamic value from angular to jquery script

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related