如何将所有输入字段设置为只读ng-template的角度

问题描述：

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

但是，这是抛出以下错误。如何将所有输入字段设置为只读ng-template的角度

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

可是我已经包括jQuery前angular库

在Google上搜寻我看到它说，这是不正确的做法几个环节。

所以我的问题是如果我这样做，我该如何解决我的要求，否则什么可能是更好的方法？

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

您可以创建一个plnkr –

答

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

这不会禁用哪些是定制指令 –

的一部分投入试试这个小提琴http://jsfiddle.net/3BBbc/26/ –

答

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

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

答

问题是：你可以注入$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/

如何将所有输入字段设置为只读ng-template的角度

相关推荐