すべての入力フィールドをngテンプレートの読み取り専用に設定する方法

Question

app.controller('custCtrl',custCtrl); 

custCtrl.$inject = ['$element']; 

function custCtrl($element) 
{ 
    //call API & get the json 
    if(jsonData.readonlyFlag){ 
    var elems = $element.find('input[type=text]'); 
    elems .forEach(function(elem) { 
    //need to set each elem to readonly 
});} 
} 

しかし、これは以下のエラーを投げています。

angular.js:13042 Error: [$injector:unpr] Unknown provider: $elementProvider <- $element <- custCtrl

しかし、私は、これは正しい方法ではないことを述べているいくつかのリンクを参照してくださいjQueryグーグル上のライブラリ

angular前に、私はすでに含まれています。

私がこのようにしているのであれば、私の要件はどうすればいいのでしょうか？

要件： - すべての入力フィールドをng-templateの読み取り専用に設定する方法はありますか？

Answer 1

//html 
<form id="test"> 
    <div> 
     <input type="text" class="test1" name="test2" /> 
    </div> 
    <div> 
     <input type="text" class="test3" name="test4" /> 
    </div> 
</form> 

//in your controller 
$('#test').find('input').each(function (idx, input) { 
    $(input).attr('disabled','disabled'); 
}); 

Answer 2

https://docs.angularjs.org/api/ng/function/angular.element

angular.element("#test").find('input').each(function (index, input) { 
     input.setAttribute('readOnly', 'true'); 
    }); 

Answer 3

問題：あなたは、「コンポーネントのコントローラに、ない '定期的' コントローラに$elementを注入することができます - あなたがエラーを取得する理由です。

解決策：より適切な方法は、コントローラにいくつかのフラグを設定することです。 $scope.options.readonlyを作成し、このフラグを使用して入力を有効/無効にするディレクティブを作成します。

// In controller: 
$scope.options.readonly = false; 

// In template: 
<input is-readonly="options.readonly" ...> 

// Create directive: 
app.directive('isReadonly', function() { 
    return { 
     link: function(scope, element, attrs) { 
      scope.$watch(attrs.isReadonly, function(value) { 
       element.attr('disabled', value ? 'disabled' : null); 
      }); 
     }, 
    }; 
}); 

JSfiddle：http://jsfiddle.net/5jruhs83/