如何在角度中将所有输入字段设置为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
});}
}

但这抛出了以下错误。

角度.js：13042 错误： [$injector：unpr] 未知提供程序： $elementProvider <- $element <- custCtrl

但是我已经在angular图书馆之前包含了jQuery

在谷歌搜索中，我看到很少的链接说这不是正确的方式。

所以我的问题是，如果我这样做，我该如何满足我的需求，还有什么更好的方法？

要求： -如何将所有输入字段设置为ng模板的只读？

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

小提琴：http://jsfiddle.net/5jruhs83/