Javascript 如何在角引导模型中动态绑定值？

在这里，我必须使用角度引导滑块动态绑定刻度、值、最大值和最小值。但我无法绑定这些值

控制器：

var app = angular.module("sliderApp", ['ui.bootstrap-slider']);

app.controller('sliderCtrl', function ($scope, $http) {
    var labels =[{ "val": 1, "txt": "one" }, { "val": 2, "txt": "2" }, { "val": 3, "txt": "3" }, { "val": 4, "txt": "4" }, { "val": 5, "txt": "5+" }];
    var ticks = [12, 24, 36, 48, 60, 72];
    /* maximum value functionality*/
    function getMax(labels, prop) {
        var max;
        for (var i = 0 ; i < labels.length ; i++) {
            if (!max || parseInt(labels[i][prop]) > parseInt(max[prop]))
                max = labels[i];
        }
        return max;
    }
    $scope.sliderMaxVal = getMax(labels, "val").val;
    console.log($scope.sliderMaxVal);

    /* Minimum value functionality*/
    function getMin(labels, prop) {
        var min;
        for (var i = 0 ; i < labels.length ; i++) {
            if (!min || parseInt(labels[i][prop]) < parseInt(min[prop]))
                min = labels[i];
        }
        return min;
    }
    $scope.sliderMinVal = getMin(labels, "val").val;

    $scope.vfg = 1200;

    this.sliderValue = 53;
    this.sliderLabels = function () {
        return labels;
    }
    this.sliderTicks = function () {
        return ticks;
    }
    this.myFormatter = function (value) {
        console.log('value %s', value);
        return '<span class="tooltip-header-title">' + value + ' months </span><br> ' + (value - 1) + ' payments + VFG <span class="glyphicon glyphicon glyphicon-tags" aria-hidden="true"></span>';
    }
});

var-app=angular.module（“sliderApp”，['ui.bootstrap slider']）；
app.controller（'sliderCtrl'，函数（$scope，$http）{
var标签=[{“val”：1，txt:“one”}，{“val”：2，txt:“2”}，{“val”：3，txt:“3”}，{“val”：4，txt:“4”}，{“val”：5，txt:“5+”}]；
var ticks=[12,24,36,48,60,72]；
/*最大值功能*/
函数getMax（标签、道具）{
var-max；
对于（变量i=0；iparseInt（max[prop]））
max=标签[i]；
}
返回最大值；
}
$scope.sliderMaxVal=getMax（标签“val”）.val；
log（$scope.sliderMaxVal）；
/*最小值功能*/
函数getMin（标签、道具）{
var-min；
对于（变量i=0；i”+（value-1）+“付款+VFG”；
}
});

HTML:

值：{slider.sliderValue}}

VFG:{{VFG}}

现在，我必须绑定滑块min和max值，比如{{sliderMinValue}}和{{sliderMaxValue}}而不是静态值。但当我这样做时，我得到了如下图所示的这种类型的错误：

普朗克：

---

尝试更改它以使用：

---

但是，这些值没有出现在工具提示中，它显示为func，请检查一下plunker链接好吗。@bpbsr我已经为你的plunker分叉了。

  <div class="col-md-4 .col-xs-4">
            <div ng-controller="sliderCtrl as slider">
                <slider ng-model="slider.sliderValue" min="{{sliderMinValue}}" step="1" max="72" value="sliderApp.sliderValue" ticks="slider.sliderTicks()" ticks-labels="slider.sliderLabels()" formatter="slider.myFormatter" tooltip="always"></slider>
                <p>Value: {{slider.sliderValue}}</p>
                <p>VFG: {{vfg}}</p>
            </div>
        </div>

<slider ng-model="slider.sliderValue" 
        ng-min="slider.sliderMinVal" 
        ng-max="slider.sliderMaxVal" 
        step="1" 
        value="sliderApp.sliderValue" 
        ticks="slider.sliderTicks()" 
        ticks-labels="slider.sliderLabels()"  
        formatter="slider.myFormatter" tooltip="always">
</slider>