Question

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

我的观点：

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

My Form 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" /> 形式

Thk提前

Answer 1

你可以通过使用ngShow在模板中做到这一点，但如果你想在你的指令中做到这一点我猜你不能在链接函数中这样做，因为它不支持html变换，因为我知道，我想你应该尝试在编译功能中执行此操作，您可以阅读更多相关信息here。

Answer 2

如果你想在angularjs中添加动态属性到form元素，你可以做以下事情。

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

注意：我在这里使用 querySelectorAll（'selector'）获取所有输入元素，如果你想单独拍摄，你可以使用 querySelector（'selector'）。< / p>

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>

动态按键属性添加了值函数

<form> angularJs </form>中的Dynamic Add属性

2 个答案: