Question

我有以下指令：

!(function (window, angular) {
    'use strict';

    /**
     * @ngdoc directive
     * @name app.directive:social
     * @description
     * # social
     */
    angular.module('app')
        .directive('social', function(social_network_conf) {
            return {
                restrict: 'A',
                scope: {
                    social: "@"
                },
                require: 'ngModel',
                controller: function($scope, $element){
                    //for tests only
                    $scope.render = function(){
                        //how to I get the ngModel here
                        ngModel.$render();
                    };

                    $scope.setViewValue = function(val){
                        ngModel.$setViewValue(val);
                    };
                },
                link: function(scope, element, attr, ngModel) {

                    ngModel.$formatters.push(function(value) {// from model to view
                        value = value.trim();
                        if(value){
                            if (value.indexOf(social_network_conf.matcher) === 0){
                                var split_link = value.split(social_network_conf.divider);
                                return split_link[split_link.length-1];
                            }
                            else{
                                return value;
                            }
                        }
                    });

                    ngModel.$parsers.push(function(value) { // from view to model
                        value = value.trim();
                        if(value){
                            if (value.indexOf(social_network_conf.matcher) === 0){
                                return value;
                            }
                            else{
                                return social_network_conf.prefix + scope.social +
                                       social_network_conf.suffix + value;
                            }
                        }
                    });
                }
            };
        });
}(window, window.angular));

测试如下：

'use strict';

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

  // load the directive's module
  beforeEach(module('app'));

  var element,
    social_network_conf,
    linker,
    scope,
    $httpBackend;

  beforeEach(inject(function ($rootScope, _$httpBackend_, _social_network_conf_) {
    scope = $rootScope.$new();
      social_network_conf = _social_network_conf_;
      //Must be an object to make use of prototypical inheritence for out-side-of-isolate-scope access
      scope.models = {};

      $httpBackend = _$httpBackend_;
      $httpBackend.whenGET(/views\/social.html/).respond('<div></div>');
      $httpBackend.whenGET(/views\/navigation.html/).respond('<div></div>');

  }));

  it('It should convert ngModel into full HTTP address notation', inject(function ($compile) {
    element = angular.element('<input social="test_network" ng-model="models.test_network"></social>');
    linker = $compile(element);
    element = linker(scope);
    scope.$apply(function(){
        element.val('test');
    });
    scope.$digest();
    expect(scope.models.test_network).toBe(social_network_conf.prefix + 'test' +
          social_network_conf.suffix);
//    expect(element.text()).toBe('this is the social directive');
  }));
});

问题在于那些线：

scope.$apply(function(){
    element.val('test');
});

实际上不要调用我定义的$解析器。

虽然使用API为指令创建一个控制器来调用ngModel.$render或ngModel.$setViewValue但是我没有办法在指令控制器上访问ngModel而没有丑陋的黑客攻击。

Answer 1

2种可能的解决方案：

首先将元素包装在表单中，并为输入字段和表单分配name属性，然后按如下方式访问输入字段：

scope.form_name.input_name.$setViewValue('value')

工作代码：

'use strict';

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

  // load the directive's module
  beforeEach(module('app'));

  var element,
    social_network_conf,
    linker,
    scope,
    $compile,
    $body,
    html,
    $httpBackend;

  beforeEach(inject(function ($rootScope, _$compile_, _$httpBackend_, _social_network_conf_) {
    scope = $rootScope.$new();
      social_network_conf = _social_network_conf_;
      //Must be an object to make use of prototypical inheritence for out-side-of-isolate-scope access
      scope.models = {};
      $compile = _$compile_;
      $httpBackend = _$httpBackend_;
      $body = $('body');
      $httpBackend.whenGET(/views\/social.html/).respond('<div></div>');
      $httpBackend.whenGET(/views\/navigation.html/).respond('<div></div>');
      $body.empty();
      html = '<form name="testForm">' +
                '<input social="test_network" name="test" ng-model="models.test_network">' +
             '</form>';

  }));

  it('It should convert ngModel into full HTTP address notation', function () {

    element = angular.element(html);
    linker = $compile(element);
    element = linker(scope);

    var viewValue = 'test',
        input = element.find('input');

    scope.models.test_network = viewValue;
    scope.$digest();

    scope.testForm.test.$setViewValue(viewValue);

    scope.$digest();
    expect(scope.models.test_network).toBe(social_network_conf.prefix + input.isolateScope().social +
          social_network_conf.suffix + viewValue);

  });

或者，第二个提供在元素上发送输入事件 - 对于Angular 1.3没有用。这在This YouTube video中得到了证明。

 element.val('test');
 element.trigger('input');

Answer 2

懒惰的答案较短：只需在元素上触发change或input。

基本上：

element.val('test').trigger('change')
$rootScope.$digest()

应该触发你添加的解析器。

Answer 3

尝试以下代码

element.val('test').triggerHandler('input');

另外，请检查triggerHandler vs. trigger in jQuery

Answer 4

element.trigger('input');

在Chrome中运行测试时为我工作，但在IE中运行它失败了。

element.trigger('change');

适用于IE和Chrome。

这可能是人们报告不同结果的原因。

使用$ parsers（和$ formatters）对指令进行单元测试

4 个答案: