如何將所有輸入字段設置爲只讀ng-template的角度

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庫

在Google上搜尋我看到它說，這是不正確的做法幾個環節。

所以我的問題是如果我這樣做，我該如何解決我的要求，否則什麼可能是更好的方法？

要求： - 如何將所有輸入字段設置爲只讀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/