javascript - 如何使用 form.$addControl()

Question

我正在使用 Angular 1.0.8。如何正确添加已编译的表单元素？我认为它与如何使用 $addControl 有关？

考虑这个例子:http://jsfiddle.net/lesouthern/LB4Tx/

在此示例中添加选择后，只有输入“myInput”时表单才有效，它无法识别带有附加选择的“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);
        }
    }
});

Answer 1

form.$addControl() 是不必要的。我更正了我的编译命令，附加元素现在正在向表单 Controller 注册:http://jsfiddle.net/lesouthern/8CDNc/

$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);
        });
    }