如何动态添加 ng-readonly 属性

【问题标题】：How to dynamically add ng-readonly attribute如何动态添加 ng-readonly 属性
【发布时间】：2020-09-05 01:27:54
【问题描述】：

在我的 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 属性？

【问题讨论】：

标签： javascript html angularjs dom

【解决方案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);

【讨论】：