Question

我的指令看起来像这样（从输入中删除非数字）：

'use strict';

angular.module('fooApp')
  .directive('percent', function () {
    return {
    require: 'ngModel',
    link: function (scope, element, attr, ngModelCtrl) {
      function fromUser(text) {

        // get rid of non-number data
        var transformedInput = text.replace(/[^0-9]/g, '');

        if(transformedInput !== text) {
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();
        }
        return transformedInput;
      }

      ngModelCtrl.$parsers.push(fromUser);
    }
  };
  }

我的测试看起来像这样：

'use strict';

describe('Directive: percent', function () {

    var $compile;
    var $rootScope;

  beforeEach(module('fooApp'));

  beforeEach(inject(function(_$compile_, _$rootScope_){
    $rootScope = _$rootScope_;
    $compile = _$compile_;
  }));

  it('Removes non-digits', function () {
    $compile('<input percent ng-model="someModel.Property" value="1a2b3"></input>')($rootScope);
    $rootScope.$digest();
    console.log($rootScope.someModel);
    expect($rootScope.someModel.Property).toEqual('123');
  });
});

但是我可以在日志中看到：

LOG: undefined

所以听起来someModel未设置=＆gt;测试失败。

不确定我的指令有什么问题。如果我手动测试：在HTML页面中输入非数字，这些不会显示（被忽略）。

测试它的正确方法是什么？

我怀疑，一旦数据不是来自用户而是通过值设置，我的指令不会修改内容。但不确定如何改变它。

Answer 1

您应该使用modelController $setViewValue(value)来触发解析器管道。要掌握模型控制器，您必须将虚拟html包装在form中：

  $compile('<form name="form1"><input percent ng-model="someModel.Property" name='data'></input></form>')($rootScope);
  $rootScope.form1.data.$setViewValue('1a2b3')
  $rootScope.$digest();
  console.log($rootScope.someModel);
  expect($rootScope.someModel.Property).toEqual('123');

你可以尝试一下。

angularjs测试指令修改用户输入

1 个答案: