javascript - $render sluttet å fungere i angular 1.2.2 (filvalideringsdirektiv)


Jeg har migrert fra Angular 1.0.8 til Angular 1.2.2 i går, og bortsett fra en rekke andre ting som ble ødelagt og som jeg allerede har fikset, fungerer ikke lenger $render-funksjonen på følgende direktiv.

Har noen opplevd en slik oppførsel før?

directive('validFile', function (utils, $filter) {
    return {
        require: 'ngModel',
    link: function (scope, el, attrs, ngModel) {

      if(utils.isMobileAgent())
          return;
      var form = el.parents().find('form');
        ngModel.$render = function () {
          debugger;
          if(form.hasClass('ng-pristine'))
            return;

          if(el.val() && el.val().length > 0){
            ngModel.$setViewValue(el.val());
          }

          if(el.hasClass('ng-invalid')){
            el.parent().addClass('ng-invalid').addClass('ng-invalid-required');
            ngModel.$setValidity(attrs.name, false);
            ngModel.$setPristine(attrs.name, false);
            scope.fileMsg =  $filter('translate')('PLEASESELECT') + ' ' + $filter('translate')(attrs.name);
            // scope.layout.showFileError = true;
          }
          else{
            el.parent().removeClass('ng-invalid').removeClass('ng-invalid-required').addClass('ng-valid');
            ngModel.$setValidity(attrs.name, true);
          }
        };
        el.bind('mouseover', function(){
          if(form.hasClass('ng-dirty') && el.parent().hasClass('ng-invalid'))
          el.removeClass('ng-pristine');
        });
        el.bind('mouseleave', function(){
          if(el.val() && el.val().length > 0){
           el.addClass('ng-pristine');
          }
        })
        el.bind('change', function () {
            scope.$apply(function () {
                ngModel.$render();
            });
        });
        form.bind('change', function () {
            scope.$apply(function () {
                ngModel.$render();
            });
        });
    }
};
});

oppmerking :

<input type="file" data-ng-model='model.formData.resume' name="resume" data-valid-file data-my-validate data-value-required="true">

Svar #1

Øk prioriteten til direktivet ditt til noe over 0.

For eksempel:

myApp.directive('validFile', function ($filter) {
   return {
     priority: 10,

Her er en detaljert forklaring på problemet som jeg fant knyttet til dette ui-tinymce-problemet, som, i bunn og grunn, er det samme som ditt.

Den korte versjonen av forklaringen er at denne endringen gjør at input's $render får forrang over din egen. Ved å heve prioriteten til din direktiv gir du, i praksis, ditt $render forrang - som det var før den endringen i 1.2 rc3.

Svar #2

Jeg har testet dette med Angular 1.2.10 for en tekstboks, og uansett hvilken prioritet jeg satte, ble den originale input $render-metoden satt etterpå og overstyrte min $render-funksjon.

Dette problemet oppstår også i angular-ui tinymce-modulen, som ikke kan gjengi den opprinnelige modellverdien. Så jeg endret timeout-delen i tinymce-direktivet for å overstyre den opprinnelige $render-metoden som følger:

var render = function() { // my rendering code }    
setTimeout(function () {
                      tinymce.init(options);
                      if (ngModel.$render != render) {
                          var originalRender = ngModel.$render;
                          ngModel.$render = function() {
                              originalRender();
                              render();
                          };
                  }
              });

På denne måten, etter at alle «link»-funksjonene er utført, kan du overstyre render-metoden.