angularjs測試指令修改用戶輸入

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未設置=>測試失敗。

不知道我的指令有什麼問題。如果我手動測試：在HTML頁面輸入非數字，這些不會顯示（被忽略）。

什麼是正確的方法來測試？

我懷疑，一旦數據不是來自用戶，而是通過值來設置，我的指令不會修改內容。不知道如何改變這一點。

Answer 1

你應該做的是使用modelController $setViewValue(value)來觸發你的解析器管道。要獲得modelcontroller的保持，你就必須包裝啞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'); 

你可以給它一個嘗試。