0

我是 AngularJS 的新手,所以如果我完全偏离轨道,我深表歉意。

模板(迭代):

<div class="title">
            <input ng-model="menuItem.kind" capitalize-first />
</div>

指令(大写):

angular.module('phonecat', []).directive('capitalizeFirst', function() {
return {
    require: 'ngModel',
    link: function(scope, element, attrs, modelCtrl) {
        var capitalize = function(inputValue) {
            var capitalized = inputValue.charAt(0).toUpperCase() +
                inputValue.substring(1);
            if(capitalized !== inputValue) {
                modelCtrl.$setViewValue(capitalized);
                modelCtrl.$render();
            }

            return capitalized;
        }
        modelCtrl.$parsers.push(capitalize);
        capitalize(scope[attrs.ngModel]);  // capitalize initial value
    }
};
});

结果是一个空白跨度。有任何想法吗?

4

1 回答 1

0

你不能使用scope[attrs.ngModel]. AngularJs 不会设置scope['menuItem.kind'] = ...,但是scope.menuItem.kind = ....

此外,该值可能已解析为父范围。因此,您最好的选择是使用( )ngModel.$modelValue获取当前模型值。ngModelcapitalize(modelCtrl.$modelValue);

这导致了另一个问题。您在链接阶段没有此值,它是轻微异步的。要解决它,您只需要$timeout异步注入和运行此代码:

$timeout(function() {
  capitalize(modelCtrl.$modelValue);
}, 0);

因此,总而言之,您只需将指令的最后一行更改为上面的那一行,这将解决问题。其他都还好,看看这个 Plnkr

于 2013-07-26T23:14:49.097 回答