Javascript 如何使用表单。$addControl（）

我使用的是Angular 1.0.8。如何正确添加已编译的表单元素？我想这与如何使用$addControl有关

考虑这个例子：

在本例中添加select后，只有当输入“myInput”时，表单才有效，它不能识别附加select的“required”指令

<div ng-app="pageModule"
    ng-controller="parentCtrl">
    <script type="text/ng-template" id="myTemplate">
        <select name="mySelect"
            add-to-form
            ng-model="val"
            required
            ng-options="o.id as o.name for o in options">
            <option value="">Select my option...</option>
        </select>
    </script>
    <form name="myForm"
        id="myForm"
        novalidate
        ng-submit="mySubmit()">
        <input name="myInput"
            ng-model="myInput"
            required />
        <div id="dest"></div>
        <button type="submit">Click me to submit</button>
        {{myForm.$invalid}}
    </form>
    <button ng-click="mkSelect()">create select</button>
</div>



var pageModule = angular.module('pageModule',[])
.controller('parentCtrl',function($scope,$compile) {
    $scope.options = [
        { id : "nissan", name: "Nissan" },
        { id : "toyota", name: "Toyota" },
        { id : "fiat"  , name: "Fiat" },
        { id : "chevy", name: "Chevy" },
        { id : "honda", name: "Honda" },
        { id : "gmc"  , name: "GMC" }
    ];
    $scope.mkSelect = function() {
        var dest = angular.element(document.getElementById('dest')),
            html = angular.element(document.getElementById('myTemplate')).html().trim();
        dest.append($compile(html)($scope));
    }
    $scope.mySubmit = function() {
        console.log('this is my submit');
    }
})
.directive('addToForm',function() {
    return {
        require : ['ngModel'],
        controller : function() {},
        link : function($scope,$element,$attr,$ctrls) {
            var modelCtrl = $ctrls[0];
            $scope.myForm.$addControl(modelCtrl);
        }
    }
});

选择我的选项。。。
点击我提交
{{myForm.$invalid}}
创建选择
var pageModule=angular.module（'pageModule'，[]）
.controller（'parentCtrl'，函数（$scope，$compile）{
$scope.options=[
{id:“日产”，名称：“日产”}，
{id:“丰田”，名称：“丰田”}，
{id:“菲亚特”，名称：“菲亚特”}，
{id:“雪佛兰”，名字：“雪佛兰”}，
{id:“本田”，名称：“本田”}，
{id:“gmc”，名称：“gmc”}
];
$scope.mkSelect=函数（）{
var dest=angular.element（document.getElementById（'dest'）），
html=angular.element（document.getElementById（'myTemplate'））.html（）.trim（）；
dest.append（$compile（html）（$scope））；
}
$scope.mySubmit=function（）{
log（“这是我的提交”）；
}
})
.directive（'addToForm'，function（）{
返回{
要求：['ngModel']，
控制器：函数（）{}，
链接：函数（$scope、$element、$attr、$ctrls）{
var modelCtrl=$ctrls[0]；
$scope.myForm.$addControl（modelCtrl）；
}
}
});

表单。$addControl（）是不必要的。我更正了compile命令，现在附加的元素正在表单控制器中注册：

---

如果您不需要

$compile

您的html，您可以使用

ng show

指令隐藏

，直到需要为止。请注意，它仍然是

必需的

---

...
点击我提交
创建选择

$scope.mkSelect = function() {
        var dest = angular.element(document.getElementById('dest')),
            html = angular.element(document.getElementById('myTemplate')).html().trim();
        $compile(html)($scope,function(_element,_scope) {
            dest.append(_element);
        });
    }

<form>
  ...
  <select name="mySelect" id="multipleSelect" ng-show="mkSelected"
           ng-model="data.singleSelect" required>
  <button type="submit">Click me to submit</button>
</form>
<button ng-click="mkSelected=true">Create Select</button>