Question

我的模型在控制器中填充，当我绑定数据时就像那样，但是输入框是空白的。输入值后，一切正常。但如果默认值为空，则会大大困扰我的用户。

<div class="row" ng-controller="RangeInputCtrl">
    <div class="col-md-12">
        <label class="leftwall">
            Value:
            <input type="number" class="form-control"
                   ng-model="percentOfMax.current"
                   min="{{percentOfMax.min}}"
                   max="{{percentOfMax.max}}"
                   ng-change="changeValue()" />                
        </label>
    </div>
</div>

ng-value 对此指令无效，因为angular会劫持输入元素。没有min和max，代码工作甚至最差，所以我知道它们是必需的（或至少需要行动）。

由于twitter-bootstrap 3，我将输入指令包装在标签中。

(function () {
    'use strict';
    var controllerId = 'RangeInputCtrl';

    angular.module('app').controller(controllerId,['$scope', buildRangeInput]);

    function buildRangeInput($scope) {
        $scope.percentOfMax = InitCalcPercentOfMax($scope);

        $scope.changeValue = function () {
            var percentOfMax = $scope.percentOfMax;
            $scope.percentOfMax = calcPercentOfMax(percentOfMax);
        }
    }
})();

有一个函数，这里没有发布需要$ scope并从复杂对象构建初始数据结构的函数。这里没有显示。 InitCalcPercentOfMax 已经过测试并按计划运行。它是外部的，由于代码重用而单独调用。

另一个函数 calcPercentOfMax（percentOfMax）用于重新计算已经提取的某些指令中使用的公式（用于故障排除）。

总之在某个地方，我必须有一些表演或发布错误的东西，我只是看不到它。

我到处都有console.log（[some expression]），看看数据是不正确还是空白，但 percentOfMax.current 值总是至少为0，所以我仍然没有看到我从哪里得到一个空白。

控制台没有错误。如果我输入<span>{{percentOfMax.current}}</span>，我会在第一次加载时获得正确的值。

模型中存在值，输入框中只有空白。

我认为这是所有细节，如果我错过了什么，我会尝试尽快回复。

根据角聊天室的讨论，我做了以下更改。

var d = $q.defer();

var p = d.promise;

//If I leave this off, it never resolves. So there is nothing in the directive to trigger resolve.
d.resolve(function () { 
    return InitCalcPercentOfMax($scope);
}())

$scope.percentOfMax = p.then(function (POM) {
    $scope.percentOfMax = POM;
});

我还将<span>{{percentOfMax}}</span>添加回了我的观点。我可以看到承诺触发，我可以看到预期数据在我的 precentOfMax 中，但输入框仍然是空的。

在有人要求之前，我正在使用从Nuget

下载的版本Angular.js 1.2.14

Answer 1

它看起来应该可以工作，我的猜测是你错过了控制台上的错误，或者还有其他逻辑错误。这个JSBin示例是一个简化版本：http://jsbin.com/zumedezu/1/edit

尝试将Value:更改为Value: {{percentOfMax.current}}以输出当前值。

InitCalcPercentOfMax是否有可能在Angular之外执行计算异步？

Answer 2

InitCalcPercentOfMax（$ scope）作为字符串返回.current。 CalcPercentOfMax并没有纠正它，但知道如何使用字符串作为数字。

由于输入类型是数字，因此新的数值导致.current更改为数字，因此其值已显示。

希腊午餐时间看到了初始值。

输入[数字]不使用角度和数字显示值。 twitter bootstrap

2 个答案: