添加输入的AngularJS指令_Angularjs_Angularjs Directive

添加输入的AngularJS指令

angularjs

添加输入的AngularJS指令,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我有一个AngularJS指令，它的模板中有一个输入元素。现在，我可以在标记中添加此指令，并绑定ng模型，而不会出现任何问题我遇到的问题是动态添加到中的输入没有显示在formContoller中，这使得正确的验证变得不可能是否有一种方法可以使包含在具有自己作用域的中的指令能够动态添加将包含在该指令所包含的formController中的输入更新因此，当我试图构建一个更简单的示例时，我确实找到了问题的根本原因，这就是我使用$compile生成所用模板的事实。我已经创建了plunker上发生

我有一个AngularJS指令，它的模板中有一个输入元素。现在，我可以在

标记中添加此指令，并绑定

ng模型

，而不会出现任何问题

我遇到的问题是动态添加到

中的输入没有显示在

formContoller

中，这使得正确的验证变得不可能

是否有一种方法可以使包含在具有自己作用域的

中的指令能够动态添加将包含在该指令所包含的

formController

中的输入

更新

因此，当我试图构建一个更简单的示例时，我确实找到了问题的根本原因，这就是我使用

$compile

生成所用模板的事实。我已经创建了plunker上发生的问题的简化版本：

AngularJS代码

angular.module（'directive'，[]）.directive（'containerDir'，function（）{
返回{
范围：{
测试：'@'
},
编译：函数（元素、属性）{
返回函数（范围、元素、属性）{
scope.model={
数据对象：{}
}
};
}
};
});
角度.module（'directive'）。directive（'inputDir'，function（$compile）{
返回{
模板：“”，
范围：{
模型：'=数据模型'
},
编译：函数（元素、属性）{
返回{
前置：功能（范围、元素、属性）{
var模板=“”；
html（$compile（template）（scope））；
},
post：功能（范围、元素、属性）{
}
};
}
};
});

模板


名字
值：{model.dataObject.firstName}
{{testForm.firstName.$error | json}
用户名
值：{{model.dataObject.username}
{{testForm.username.$error | json}
{{testForm | json}}
提交
重置

下面是相同的示例，没有使用$compile来显示它在没有$compile的情况下也可以工作：

现在，我仍然想知道，我正在尝试的是通过使用

$compile

为指令生成HTML的指令动态添加输入元素，这是否可行

虽然我可能能够重写相关指令，使其不使用

$compile

，但我仍然想知道这是否可能供将来参考。

你能举个例子吗？这有帮助吗？我试着使用ng表单，但它不起作用（也许我做得不对）。我还尝试使用formController.$addControl（），虽然它在formController中添加了一个控件，但它没有正确链接到追加输入的模板（输入中的更改不会触发对该模型的更改）。我将尝试创建一个简化的指令来说明这个问题。

angular.module('directive', []).directive('containerDir', function() {
  return {
    scope: {
      test: '@'
    },
    compile: function(element, attributes) {
      return function(scope, element, attributes) {
        scope.model = {
          dataObject: {}
        }
      };
    }
  };
});

angular.module('directive').directive('inputDir', function($compile) {
  return {
    template: '<span></span>',
    scope: {
      model: '=dataModel'
    },
    compile: function(element, attributes) {

      return {
        pre: function(scope, element, attributes) {
          var template = '<input type="text" name="username" ng-model="model.username" required />';
          element.html($compile(template)(scope));
        },
        post: function(scope, element, attributes) {
        }
      };
    }
  };
});

<!doctype html>
<html ng-app='directive'>
  <head>
  <script data-require="jquery" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    <script src="script.js"></script>

  </head>
  <body>
    <div container-dir>
      <form name="testForm" nag-resettable-form style="padding-left: 20px;">
        <div>
          <label for="first-name">First Name</label>
          <input id="first-name"
                 type="text"
                 name="firstName"
                 ng-model="model.dataObject.firstName"
                 required
          />
          <div>value: {{model.dataObject.firstName}}</div>
          <div>{{testForm.firstName.$error | json}}</div>
        </div>
        <div>
          <label for="username">Username</label>
          <span input-dir data-data-model="model.dataObject"></span>
          <div>value: {{model.dataObject.username}}</div>
          <div>{{testForm.username.$error | json}}</div>
        </div>
        <div>
          {{testForm | json}}
        </div>
        <div style="padding-top: 1rem;">
          <button class="primary" ng-click="model.submitForm()">Submit</button>
          <button ng-click="resetForm(formReveal, {}, model.resetForm)">Reset</button>
        </div>
      </form>
    </div>
  </body>
</html>