如何动态添加 ng 只读属性

Question

在我的JS代码中，我想创建一个具有ng-readonly属性的input元素。我的代码如下：

var newClientNameInputBox = document.createElement("input");
newClientNameInputBox.name = "clientNames";
newClientNameInputBox.type = "text";
newClientNameInputBox.className = "form-control";
newClientNameInputBox["ng-readonly"] = "setReadonly";

然而，事实证明newClientNameInputBox只有属性name、type和class。缺少ng-readonly属性。我应该如何添加ng-readonly属性？

Answer 1

您可以使用： 编译器(又名$complie(是一个AngularJS服务，它遍历DOM寻找属性。 https://docs.angularjs.org/guide/compiler

这样的事情应该有效：

var template = '<input name="clientNames" type="text" class="form-control" ng-readonly="setReadonly" />';
var newClientNameInputBox = angular.element(template);
var $compile = ...; // injected into your code
var scope = ...; // { setReadonly : true }
var parent = ...; // DOM Parent where you want to drop your input    
var compiledElement = $compile(newClientNameInputBox)(scope);
parent.appendChild(compiledElement);