how to set all the inputs fields to readonly of an ng-template in angular

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

But this is throwing the below error.

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

But I have already included jQuery before angular library

On googling I see few links which says that this is not the right way.

So my question is if I am doing this way, how do I address my requirement else what could be the better way?

Requirement: - how to set all the inputs fields to readonly of an 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

The problem: you can inject $element into a 'component' controller, not into 'regular' controller - this is why you get the error.

The solution: more proper way would be to set some flag in your controller, e.g. $scope.options.readonly and create a directive that uses this flag to enable/disable inputs.

// 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/