javascript - 动态添加属性角Js

Question

我正在尝试在使用 angularJs 指令中添加动态添加属性我想在表单中动态添加 html 标记

我的观点 ：

<div ng-show="edit_tasks">   
   <edittask-form><edittask-form> 
</div>

我的表单 HTML

{
<div>
  <form ng-submit="submitFrom()" csrf-tokenized>
    Task Name<input type="text" placeholder="Name" ng-model="newtask.name" required />
    Task Description<input type="text" placeholder="Description" ng-model="newtask.description" required />
    Start Date <input type="text" placeholder="Start date" ng-model="newtask.start_date" required />
    Start Date <input type="text" placeholder="End date" ng-model="newtask.end_date" required />
    <input type="submit" value="submit" />
  </form>
</div>
}

我的指令

module.directive("edittaskForm", function() {
  return {
    restrict: "E",
    templateUrl: "<%=asset_path 'tasks/task_form.html' %>",
    controller: tasksCtrl,
    replace: false,
    link: function(scope, elt, attrs, controller) {
          scope.form = elt.find("form");
          console.log(scope.form);

          scope.taskEdit = function(task) {
            scope.task =  task;
            scope.show_tasks = false;
            scope.edit_tasks = true;
            scope.newtask = task;
          };
        }
  }
});

如何<input type="text" name="xyz" /> 在表单中添加

提前考虑

Answer 1

您可以通过使用 ngShow 在模板中执行此操作，但是如果您想在指令中执行此操作，我想您无法在链接函数中执行此操作，因为我知道它不支持 html 转换，我想您应该尝试在compile 函数，你可以在这里阅读更多关于它的信息。

Answer 2

如果您想在 angularjs 中为表单元素添加动态属性，您可以执行以下操作。

第 1 步： 创建读取表单元素的自定义指令，如下所示：

注意：这里我使用querySelectorAll('selector')来获取所有输入元素，如果你想要单人，你可以使用querySelector('selector')。

app.directive('dynamicAttribute', function ($compile) {
    return {
             link: function (scope, element, attrs, ctrl) {
                  var allElements=element[0].querySelectorAll('input');
                  for(var i=0;i<allElemts.length;i++){
                      allElements[i].setAttribute('ng-keypress','resetValues($event)');
                 }
                     $compile(allElements)(scope);
              }
         };
       });

第 2 步：将此指令添加到您的元素

 <form name="userForm" dynamic-attrubute>
    <input type="text"   name='name' ng-model-options="{ updateOn: 'blur' }" ng-model="name">
    <input type="text"  name='password' ng-model-options="{ updateOn: 'blur' }" ng-model="password">
</form>

动态按键属性添加值函数