2

コントローラーからのエラー メッセージの取得、コンパイル、および表示を担当するグローバル ディレクティブがあります。

などのサーバー検証エラーが発生した場合は、 This email already existsこの要素に注目して有効性を false に設定します$setValidity(false)。

このディレクティブはフォームではなく、フォームが含まれていません。

何を提案しますか（コメントアウトされているものはすべて試しました）

directive('messageCompile', function ( $compile, $window, $rootScope ) {
  return {
    restrict: 'A',
    scope: true,
    link: function ( scope, element, attrs ) {
      var el;

      attrs.$observe( 'template', function ( tpl ) {
        if ( angular.isDefined( tpl ) ) {
          // compile the provided template against the current scope
          el = $compile( tpl )( scope );
          // stupid way of emptying the element
          element.html("");

          // add the template content
          element.append( el );
        }
      });
      attrs.$observe('focus', function(val){
        if ( angular.isDefined( val )  && Boolean(val)) {
          var el = angular.element('[name="' + attrs.focus + '"]');
          var form = el.parents().find('form');
          var formName = form.attr('name');
           el.focus();
          // scope[formName].$setValidity(val, false);       
          // el.scope().$setValidity(false);
          // scope[formName][val].$setValidity(false);
          //$rootScope.scope[formName][val].$setValidity(false);
          //$rootScope.scope[formName].$setValidity(val, false);
        }
      });
        var windowEl = angular.element($window);
        windowEl.on('scroll', function() {
          if(window.scrollY > 46){
            element.parent().parent().addClass('stayTop');

            // alert('here');
          }  
          else{
            // alert('here2');
            element.parent().parent().removeClass('stayTop');
          }
        });

    },
  }
}).
4

2 に答える 2

4

コントローラーを使用する$scope[formName]には、フォーム要素上にある必要があります。直接定義することによって:

<form name="theForm" ng-controller="TheCtrl">

またはディレクティブとして：

directive("myDirective", function() {
    return {
        template: "<form name='theForm'>...</form>",
        controller: ["$scope", function($scope) {
            ...
        }],
        ...
    };
});

これらの条件のいずれかが満たされた場合、アクセスする必要があるすべての要素に対して name 属性を定義する必要があります。

<form name="theForm" ...>
    <input name="theInput" ...>

$setValidity()次に、上で定義したように、対応するコントローラー内で にアクセスできます。

$scope.theForm.theInput.$setValidity(false);

繰り返しますが、コントローラーがフォームにアクセスするには、コントローラーがフォームと同じ要素にあるか、子スコープにある必要があります。

于 2013-10-07T13:39:44.010 に答える
0

さて、私は十分な結果が得られる方法でこれを解決することができました:

attrs.$observe('focus', function(val){
    if (angular.isDefined(val)  && Boolean(val)) {
        var el = angular.element('[name="' + attrs.focus + '"]');
        var form = el.parents().find('form');
        var formName = form.attr('name');
        el.focus();
        el.removeClass('ng-valid').addClass('ng-invalid');
        el.bind('keyup', function(){
            el.removeClass('ng-invalid');
            el.unbind('keyup');
        });
    }
});

もちろん、keyup イベントは change イベントやその他のイベントに置き換えることができます。

于 2013-10-07T15:04:08.673 に答える