angularjs - AngularJS：编写 capatilize 指令似乎不起作用

Question

我是 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
    }
};
});

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

Answer 1

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

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

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

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

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