投稿時にAngularJSが無効にしました

Question

"アクティブ"としてダブルクリックされていないボックスで入力を無効にする指示を作成しました。私は、AngularJSがスコープ関数に無効になっている入力をまだ渡すという問題があります。

基本的な入力HTML：

<div class="selectable-boxes" toggle-inputs> 
     <div class="box selected"> 
      <div class="form-container"> 
       <div class="form-group"> 
        <input type="text" placeholder="First" name="f1" data-ng-model="fields.information.f1"> 
       </div> 
       ... 

すべての名前のF1、F2、F3 ...

指令：

app.directive('toggleInputs', function() { 
    return { 
     link: function(Scope, element, attrs) { 
      var $element = element; 

      $element.find('.box').bind('dblclick', function() { 
       $element.find('.box').removeClass('selected'); 
       $(this).addClass('selected'); 
       toggleInputDisabled(); 
      }); 

      function toggleInputDisabled() { 
       $element.find('.box').each(function() { 
        $(this).find(':input').attr('disabled', !$(this).hasClass('selected')).attr('data-ng-disabled', 'isDisabled'); 
       }); 
      } 

      toggleInputDisabled(); 
     } 
    }; 
}); 

ディレクティブが正常に動作します。これは、フィールドを無効にし、 『isDisabled』と私は$scope.isDisabled = true;を設定している」= NG-無効を追加します。しかし、これらの値は、まだ$スコープ機能に前方に渡されます。なぜ？

Object {f1: "1", f2: "2", f3: "3", f10: "4", f11: "5"…} 

Answer 1

私はこの問題を回避するための解決策を思いつきました。上記のコメントに示唆されているように、問題はng-modelであると思われ、実際に削除するのが難しいバインディングが作成され、実際にng-click="function(fields)"を使用するにはそのバインディングが必要です。

私は使用しているオブジェクトツリーに別の「置き換えられた」パラメータを追加するためにスコープを操作するディレクティブを作成しました。私はそれが存在するかどうかを確認し、それらの新しい値を使用しますが、これに別の問題がありました。

setTimeout（function（）{}、100）を使用する必要がありました。コントローラ機能の内部では、これらの新しい値を実際に見つけることができます。

app.directive('buttonClick', function() { 
    return { 
    link: function(scope, element, attrs) { 
     element.bind('click', function() { 
      scope.fields.information.replaced = {}; 

      var i = 0; 

      $('.selectable-boxes .box.selected input').each(function() { 
       scope.fields.information.replaced['f' + i] = $(this).val(); 
       i++; 
      }); 

      scope.$apply(); 
     }); 
    } 
    }; 
}); 

Answer 2

あなたが設定した後、要素を再コンパイルする必要がありますまたはjQueryのことで、属性変更：

function toggleInputDisabled() { 
    $element.find('.box').each(function() { 
     $(this).find(':input') 
      .attr('disabled', !$(this).hasClass('selected')) 
      .attr('data-ng-disabled', 'isDisabled'); 
     }); 
    } 
    $compile($element)(scope); 
} 

依存忘れないでください：私は強く使用することをお勧めします

app.directive('toggleInputs', function($compile) { … } 

Answer 3

をNG-無効むしろヘクタールよりも、タグのこれは、角度真である

NG Disabled

、だから、属性がすでに入力ボックス上にあり、コードだけでトグルされる 属性=論理式

：jQueryのスタイルの表現を読んで、RDあなたがのために行っていますあなたのためにすべての無効化を行います。私が想像している属性を後で修正すると、より多くのコードと潜在的により多くの問題が発生します。

Plunkrの例は、私のコメントから撮影：

Plunkr example

HTML部分：

<div class="form-group"> 
     <input type="text" placeholder="First" name="f1" 
     data-ng-model="fields.information.f1" ng-show="!hideem" ng-disabled="disabled"> 
    </div> 

そして、2つのコントロール：あなたの項目のInit

Disable <input type="checkbox" ng-model="disabled" name="diablethem" id="disablethem"/> 

Hide <input type="checkbox" ng-model="hideem" name="hideem" id="hideem"/> 

必要に応じて：

$scope.disabled=false; 
    $scope.hideem= false;