如何动态添加ng-readonly属性

Question

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

    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

[您可以利用：编译器（aka $ 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);