Question

在my-drtv内设有指令<input ng-required="true">和<div ng-form="myForm">。

目前内部ng-required未绑定到其表单（myForm），如何将my-drtv设置为与其父级相同的格式？

（所以在初始状态myForm.$valid应该是假的）

JS：

var myAppModule = angular.module('myAppModule', []).
    directive('myDrtv',function(){
        return {
            restrict: 'A', 
            template: '<div><input ng-required="true"></div>'
        }
    });

HTML ：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<html ng-app="myAppModule">
<body>  
    <div ng-form="myForm">
        <div my-drtv>
        </div>
        <br>
        {{myForm.$valid}}
    </div>
</body>
</html>

Answer 1

为了具有验证行为，输入字段必须同时具有ngModel和name属性。然后它将在表单控制器下注册为控件。所以你可以做到

.directive('myDrtv', function() {
    return {
        restrict: 'A',
        template: '<div><input name="inp" ng-model="inp" ng-required="true"></div>'
    }
});

或者更好地从外部传递模型和名称，然后指令将变得更加可重用：

.directive('myDrtv', function() {
    return {
        restrict: 'A',
        scope: {
            model: '=ngModel'
        },
        template: function(element, attrs) {
            return '<div><input name="' + attrs.name + '" ng-model="model" ng-required="true"></div>';
        }
    }
});

并像这样使用它：

<div ng-form="myForm">
    <div my-drtv name="some" ng-model="someField"></div>
</div>

演示： http://plnkr.co/edit/FV7jeiuLvqPmIlVyyXWr?p=preview

将内部指令绑定到其父表单

1 个答案: