Question

这是我的脚本，其中包含在我的html代码中 -

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

我从角度代码传递$ scope.moodevalue。但是当我获得$ scope.moodvalue = 0.21时，但是我的进度条上没有出现更改。

请帮助我，如何将动态值传递给脚本。

先谢谢。

Answer 1

使用angular.element（）。scope（）来获取值。和ng-change以更新值。参考这个。

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

Answer 2

试试这个：

HTML：

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

的javascript：

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

}）;

如何将动态值从angular传递给jquery脚本

2 个答案: