使用ng-model的AngularJS自定义表单组件/指令
角度自定义表单组件/指令和$ dirty属性
使用常规输入时，例如
<form name="myForm">
<input type="text" ng-model="foobar">
</form>
在输入框中键入后myForm.$dirty为true。
我想创建一个简单的指令，例如
angular.module('myModule', [])
.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
fooBar: '='
},
template: '<div><button ng-click="fooBar=foo"></button><button ng-click="fooBar=bar"></button></div>'
};
});
样本用法为
<form name="myForm">
<my-directive foo-bar="myObj.foobarValue"></my-directive>
</form>
在用户单击两个按钮中的任何一个之后，myForm$dirty设置为true。
这是如何完成的？
问题答案：
在DDO中使用ngModel控制器和require属性的对象形式：
angular.module('myModule', [])
.directive('myDirective', function() {
return {
restrict: 'E',
require: { ngModelCtrl: 'ngModel' },
scope: {
ngModel: '<'
},
bindToController: true,
controllerAs: '$ctrl',
template:
`<div>
<button ng-click="$ctrl.ngModelCtrl.$setViewValue('foo')">
Set foo
</button>
<button ng-click="$ctrl.ngModelCtrl.$setViewValue('bar')">
Set bar
</button>
</div>`,
controller: function ctrl() {}
};
});
用法：
<form name="myForm">
<input type="text" ng-model="foobar">
<my-directive ng-model="foobar"></my-directive>
</form>
通过实例化和使用ng-
model控制器
，该指令将根据需要自动设置表单控件。
演示
angular.module('myModule', [])
.directive('myDirective', function() {
return {
restrict: 'E',
require: { ngModelCtrl: 'ngModel' },
scope: {
ngModel: '<'
},
bindToController: true,
controllerAs: '$ctrl',
template:
`<div>
<button ng-click="$ctrl.ngModelCtrl.$setViewValue('foo')">
Set foo
</button>
<button ng-click="$ctrl.ngModelCtrl.$setViewValue('bar')">
Set bar
</button>
</div>`,
controller: function ctrl() {}
};
});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myModule">
<h2>ngModel DEMO</h2>
<form name="myForm">
<input type="text" ng-model="foobar">
<my-directive ng-model="foobar"></my-directive>
</form>
<br>myForm.$dirty = {{myForm.$dirty}}
<br>myForm.$pristine = {{myForm.$pristine}}
<br><button ng-click="myForm.$setDirty()">Set dirty</button>
<br><button ng-click="myForm.$setPristine()">Set pristine</button>
</body>
我建议隔离范围ngModel作为输入。输出应使用$
setViewValue方法完成
。
有关更多信息，请参见
-
AngularJS开发人员指南-实现自定义表单控件（使用
ngModel） -
AngularJS开发人员指南-基于组件的应用程序体系结构
-
问题内容： 我正在尝试创建一个指令，该指令将创建与创建指令的元素具有相同ng-model的输入字段。 到目前为止，这是我想到的： 的HTML 的JavaScript 但是，我不确定这是处理这种情况的正确方法，并且存在一个错误，即我的控件未使用ng-model target字段的值初始化。 这是上面代码的简称：http ://plnkr.co/edit/IvrDbJ 处理此问题的正确方法是什么？ 编
-
问题内容： 如果我的措词不正确，我事先表示歉意。我在的内部有一个文本框，当我尝试获取文本框值时始终为。我只希望它显示我在相应文本框中键入的内容。 似乎是一个问题，那么我该如何创建全局或控制器根级别以便可以访问它？ 这是帮助解决问题的JSFiddle：http : //jsfiddle.net/stevenng/9mx9B/14/ 问题答案： 在您的点击表达式中，您可以引用并在您的函数中对其进行访问
-
本文向大家介绍AngularJS使用自定义指令替代ng-repeat的方法，包括了AngularJS使用自定义指令替代ng-repeat的方法的使用技巧和注意事项，需要的朋友参考一下 前言 大家都知道对于处理小数量，ng-repeat是非常有用的，但是如果需要处理非常大的数量集，还是采用自定义的方法更好一些。特别是数据大多都是静态的或已预存储好的，这个时候应避免使用ng-repeat指令。 ng-
-
问题内容： 我有这个reprohttp://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq，当我单击“ Title3”并在文本框中输入一个值时显示，尽管输入的值显示在UI中，当我单击“单击”按钮时，什么也没有绑定到范围属性$ scope.test。 我不知道ng-switch有什么问题，或者我做错了什么。帮助表示赞赏！！！ http://embed.plnkr.co/nVC
-
本文向大家介绍利用Vue v-model实现一个自定义的表单组件，包括了利用Vue v-model实现一个自定义的表单组件的使用技巧和注意事项，需要的朋友参考一下 功能描述: 通过点击按钮,可以增减购物数量 组件名称是 CouterBtn 最终效果如下 我们使用 vue-cli搭建基本的开发环境,这也是最快的进行 .vue组件开发的方式 对于入口组件 App.vue (可以暂时忽略其他细节,我们
-
问题内容： 我有一个看起来像这样的表格： 它的设置使得输入数据后所有必填字段和“保存”按钮都可以使用。但是，部分验证是，我将使用输入的数据使用$ http通过POST通过服务器访问服务器。 我应该在函数中放置该逻辑还是有一个更好的放置位置？ 更新： * 我实现了以下内容，将其作为元素上的属性应用，但它在每次我不喜欢的按键上调用服务器/数据库： 问题答案： 您不需要在指令中发出$ http请求，更好