Ünite

Question

yönerge şu var:

!(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)); 

testi aşağıdaki gibi giderse:

'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'); 
    })); 
}); 

Sorun o satırlar:

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

Tanımladığım $ ayrıştırıcısını aslında çağırmayın. ngModel.$render veya ngModel.$setViewValue numaralı telefonu arayabilmesi için bir API'ye sahip olan yönergeye yönelik bir denetleyici oluşturmasına rağmen, çirkin bir hack olmaksızın yönerge denetleyicisindeki ngModel'e erişmenin bir yolu yoktur.

Answer 1

2 olası çözümler:

Önce bir form içinde eleman sarmak için ve giriş alanı ve formu bir name özelliği atamak ve sonra aşağıdaki şekilde giriş alanı erişebilmekse

:

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

Çalışma kodu:

'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); 

    }); 

Alternatif olarak, ikinci bir elementin bir giriş olayını göndermek için sunuyor - Eğik 1.3 benim için işe yaramadı. Bu, This YouTube video numaralı belgede gösterilmiştir. Tembel için

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

Answer 2

Kısa cevap: basitçe elemana change veya input tetikleme benim için çalıştı. Temelde

:

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

eklediğiniz ayrıştırıcı tetikleyebilir mı.

Answer 3

başarısız Chrome'da testi çalıştıran, ancak IE bunu çalıştırırken triggerHandler vs. trigger in jQuery

Answer 4

element.trigger('input'); 

benim için çalıştı kontrol aşağıdaki kodu Ayrıca

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

deneyin.

element.trigger('change'); 

Hem IE'de hem de Chrome'da çalıştı.

Bu yüzden insanlar farklı sonuçlar bildiriyor olabilirler.