Question

我正在玩AngularJS directive。我想格式化要显示的数据。这就是我在做的事情：

HTML：

<div ng-app="myApp" ng-controller="myCtrl">
  <input ng-model="data" type="text" test />
  <input type="button" ng-click="change()" value="Change"> {{data}}
  <br>Hello <span ng-bind="data" test></span>
</div>

JS：

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.data = 'yellow';
    $scope.change = function() {
      $scope.data = 'black';
    };
  })
  .directive('test', function() {
    return {
      require: 'ngModel',
      link: function(scope, elem, attrs, ngModel) {
        ngModel.$formatters.push(function(value) {
          //formats the value for display when ng-model is changed
          return 'brown';
        });
        ngModel.$parsers.push(function(value) {
          //formats the value for ng-model when input value is changed
          return 'green';
        });
      }
    };
  });

我可以格式化模型的数据并将其显示为input文本。但是我无法格式化绑定到模型的span的数据。 span正在显示模型。我不知道为什么跨度显示模型的价值。我想要显示跨度的格式化值。这是jsFiddle。

Answer 1

您只能将ng-model用于input。如果要在没有输入的情况下更改div，span，label或任何其他元素中的文本，可以使用分隔符。 {}

在$ scope中创建变量时，可以在html中显示它。

<div ng-app="myApp" ng-controller="myCtrl">
  <input ng-model="data" type="text" test />
  <input type="button" ng-click="change()" value="Change"> {{data}}
  <br>Hello <span test>{data}</span>
</div>

Fiddle

Answer 2

我觉得它工作得非常好，唯一的问题就是你没有在这里采取正确的例子。

首先请阅读以下内容：

格式化程序会更改模型值在视图中的显示方式。
解析器会更改视图值在模型中的保存方式。

现在替换下面的代码

ngModel.$formatters.push(function(value) {
          //formats the value for display when ng-model is changed
          return 'brown';
        });
        ngModel.$parsers.push(function(value) {
          //formats the value for ng-model when input value is changed
          return 'green';
        });

与

ngModel.$formatters.push(function(value) {
          //formats the value for display when ng-model is changed
          return value.toLowerCase();
        });
        ngModel.$parsers.push(function(value) {
          //formats the value for ng-model when input value is changed
          return value.toUpperCase();
        });

我希望这有帮助！

指令格式化要显示的文本

2 个答案: