Question

范围应根据param更改其值和位置，并且未更改为更改param

HTML：

  <body  ng-app="myApp">
    <div ng-controller="MyRngCtrl">
      Param:{{param}}
    </div>
    <hr>
    <div ng-controller="rangeCtrl">
    <div>modelValue:{{modelValue}}</div>
      <input type="range" style="width: 300px;"
             min = "0"
             max = "300"
             step = "1"
             ng-change = "rangeChange()"
             ng-model = "modelValue">
    </div>
  </body>

JS：

app.controller('rangeCtrl', function($scope) {

    $scope.modelValue =  $scope.param;
    $scope.rangeChange = function() {
    }
});

示例：JSFiddle

Answer 1

试试这个

var app = angular.module('myApp', []);
app.controller('MyRngCtrl', function($scope, $timeout) {

  (function update() {
    $timeout(update, 5000);
    $scope.param = Math.round((Math.random() * 10) * 10 * 3);
    $scope.modelValue = $scope.param

  }());
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="MyRngCtrl">
    Param:{{param}}

    <hr>

    <div>modelValue:{{param}}</div>
    <input type="range" style="width: 300px;" min="0" max="300" step="1" ng-change="rangeChange()" ng-model="modelValue">
  </div>
</body>

Answer 2

我还有一个使用$rootScope

的答案

var app = angular.module('myApp', []);
app.controller('MyRngCtrl', function($rootScope, $timeout) {
  (function update() {
    $timeout(update, 5000);
    $rootScope.param = Math.round((Math.random() * 10) * 10 * 3);
  }());
});
app.controller('rangeCtrl', function($scope, $rootScope, $timeout) {
  (function update() {
    $timeout(update, 5000);
    $scope.modelValue = $rootScope.param;
  }());
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="MyRngCtrl">
    Param:{{param}}
  </div>
  <hr>
  <div ng-controller="rangeCtrl">
    <div>modelValue:{{modelValue}}</div>
    <input type="range" style="width: 300px;" min="0" max="300" step="1" ng-model="modelValue">
  </div>
</body>

更改输入范围AngularJS的值

2 个答案: