Question

我有一个带输入框的自定义指令。此输入用于许多页面。我希望在某些表单中要求此输入字段，而在其他表单中排除。这样做的最佳方法是什么？我从控制器提交表格，所以不确定这是如何工作的角度？我是棱角分明的新人，不知道这一切将如何捆绑在一起。基本上这就是我想要的：

<form name="myForm" >
<div ng-contoller="Somecontroller as vm" >
<custom-directive>
this will create an input box like this :
<input type="text"> </input>
</custom-directive>
</div>
</form>

当我提交表单时，我想确保如果指令内的文本框没有文本，那么我应该收到错误。

Answer 1

嗨，这是你的自定义指令，这个例子你可以处理你想要的东西...你也可以使用你所有形式的指令但记住不要使用相同的ngModel，并且最后一件事总是设置ngModel指令。

        var app = angular.module("app", []);

        app.directive("requiredInput", function () {
            return {
                restrict: "E",
                required: "^ngModel",
                template: "<input type='text' ng-model='ngModel' ng-required='true'>",
                scope: {
                    ngModel: "="
                }
            }
        })

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title></title>
</head>
<body>
    <h1>form 1</h1>

<form name="form">
    <required-input ng-model="form.myInput"></required-input>
    <required-input ng-model="form.myInput2"></required-input>
    {{myInput}}

    <button ng-disabled="form.$invalid">submit</button>
</form>
<h1>form 2</h1>
    <form name="form2">
        <required-input ng-model="form2.myInput"></required-input>
        {{myInput2}}

        <button ng-disabled="form2.$invalid">submit</button>
    </form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

</body>
</html>

Answer 2

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">

<w-test-directive></w-test-directive>

<script>
var app = angular.module("myApp", []);
app.directive("wTestDirective", function() {
    return {
        template : "<input type='text'/>"
    };
});
</script>

</body>
</html>

需要角度指令输入框文本

2 个答案: