AngularJS滑块编号绑定不起作用

Question

我对 AngularJS 比较陌生，我无法让滑块和数字元素正常工作。当我更改数值时，它会更新滑块。但是，当我更改滑块值时，数字变为无效。

HTML

<div id="radius" ng-controller="RadiusController">
    <input type="range" ng-model="radius" ng-change="radiusChanged(radius)" ng-value="{{ radius }}" min="0" max="100" />
    <input type="number" ng-model="radius" ng-change="radiusChanged(radius)" ng-value="{{ radius | number }}" min="0" max="100" step="1" />
    Radius: <label>{{ radius }} km</label> 
</div>

控制器

angular.module("app").controller("RadiusController",
["$scope","RadiusService",
    function ($scope, RadiusService) {
        $scope.radius = RadiusService.getRadius();

        $scope.radiusChanged = function(radius){
            RadiusService.setRadius(+radius);
        }
    }]);

服务

angular.module("app").factory("RadiusService", function() {
    var radius = 10;

    return {
        setRadius: function(newRadius){
            console.log(typeof newRadius);
            radius = newRadius;
        },

        getRadius: function(){
            return radius;
        }
    }
});

我在设置新半径时检查了类型是一个数字，就是这样。但是每当我使用滑块时，数字元素就会变得无效。

在实时站点上，当数字更改时，它具有以下类别：

class="ng-pristine ng-valid ng-valid-number ng-valid-max ng-valid-min">

但是当使用滑块时它有这个类：

class="ng-pristine ng-valid-max ng-valid-min ng-invalid ng-invalid-number">

数字的value属性会和slider的一样，但是框内什么都不显示。如果您要单击以增加/减少，它将从数字值属性的 0 开始。

这是为什么？

Answer 1

通过在控制器中设置 $scope.radius 来修复它：

控制器

angular.module("app").controller("RadiusController",
["$scope","RadiusService",
    function ($scope, RadiusService) {
        $scope.radius = RadiusService.getRadius();

        $scope.radiusChanged = function(radius){
            radius = +radius; //parse to integer
            $scope.radius = radius;
            RadiusService.setRadius(radius);
        }
    }]);