使用角度指令仅更新“视图”值答案

【问题标题】：Updating only the 'view' value using angular directive使用角度指令仅更新“视图”值
【发布时间】：2017-06-14 23:37:51
【问题描述】：

所以我在控制器中有一个十进制值，如下所示：

// Controller
var MyController = function($scope) {
    ...
    $scope.percentValue = 0.05; // can be stored
    ...
};

<!-- View -->
<span>{{percentValue}}</span>
<input ng-model="percentValue" />

使用上面的代码，input 元素中的值是 0.05 - 但是，我希望允许用户输入一个整数值，例如 5。

所以如果 $scope.percentValue 是0.05，我想在输入元素中显示为5。如果用户输入5，$scope.percentValue 应该是0.05。

然而，这里棘手的是我只想更新视图值 - 这意味着span 元素仍应显示0.05。只有输入元素中的值应该是5。

我正在尝试使用 ngModel 来实现这一目标，但我仍在苦苦挣扎。

这就是我现在拥有的：

var MyDirective = function() {
    function link(scope, element, attrs, ngModel) {
        ngModel.$render = function() {
            element.val(ngModel.$viewValue || '');
        };

        ngModel.$formatters.push(function (value) {
            return value * 100;
        });

        element.on('change blur', function() {
            ngModel.$setViewValue(element.val());
        }); 
    }

    return {
        restrict: 'A',
        require: '?ngModel',
        scope: {},
        link: link
    };
};

请指教！！

【问题讨论】：

尝试使用过滤器。
@KimchiMan，您已经在使用$formatters 来转换模型表示以进行显示，所以只需简单地定义一个$parsers 以另一种方式进行，就像这样—plnkr.co/edit/lB6GaT1ZSrVsOi9PS1u9?p=preview跨度>
@miqid，你的答案正是我想要的——你能在答案部分添加代码吗？我会把它标记为答案
@miqid 也是，我想知道是否有一种方法可以不使用value / 100
@KimchiMan，对于期望或允许用户输入该输入的内容是否有任何限制？您正在构建的任何其他上下文也可能有所帮助。如果$formatters 已经在做value * 100，我不明白为什么value / 100 没有意义。

标签： javascript angularjs angularjs-directive angularjs-model

【解决方案1】：

包括我的评论作为答案，因为它似乎有帮助。 :-)

总结一下：由于您已经为指令提供了一个 $formatters 函数，该函数将模型值 ($modelValue) 转换为显示形式 ($viewValue)，因此只需提供一个 $parsers函数执行相反的操作并将任何用户输入转换回模型值。

Example Plunker

【讨论】：

【解决方案2】：

您想要实现的目标是可能，但我会发现阅读代码真的很混乱。我认为可以解决您的问题并保持可读性的最简单的解决方案是在$scope.percentValue 中存储一个整数值（5），以便ng-model 在输入和显示@987654326 中的值时始终处理一个整数@。然后创建一个custom filter，并使用它在<span>中将值输出为0.05。

编辑：添加一个具体的代码示例。在这里玩：https://plnkr.co/edit/C1cX2L9B2GM2yax1rw7Z?p=preview

JS：

var MyController = function ($scope) {
  $scope.percentValue = 5;
};

function formatPercent (input) {
  return input / 100;
}

var myApp = angular.module('MyApp', []);
myApp.filter('percent', function () { return formatPercent });
myApp.controller('MyController', ['$scope', MyController]);

HTML：

<body ng-controller="MyController">
  <span>{{ percentValue | percent }}</span>
  <input ng-model="percentValue">
</body>

【讨论】：

【解决方案3】：

我会为百分比创建一个过滤器：

angular.module('myModule')
.filter('percentage', ['$filter', function($filter) {
    return function(input, decimals) {
        return $filter('number')(input*100, decimals)+'%';
    };
}]);

输入将存储整数（如5）

<input ng-model="percentValue" />

但我会在 span 部分添加一个过滤器：

<span>{{percentValue | percentage:2}}</span>

感谢 https://stackoverflow.com/a/21727765/3687474 过滤指令。

【讨论】：

【解决方案4】：

除了创建过滤器，您还可以在模板上计算

<span>{{percentValue * 100}}</span>

【讨论】：