如何向组件添加ng-model功能 [英] How to add ng-model functionality to a component
问题描述
基本上,我希望能够将ng-model从父指令传递给子指令指示。我只能使用2向绑定值,但是那样我将无法在child元素的parent指令中使用ng-change。我也可以使用ng-click,但这不适用于非单击式更改(例如,文本区域而不是复选框)。因此,我想知道是否存在一种允许自定义指令具有ng-model / ng-change对的方式,类似于输入,按钮,文本区域和其他html元素的方式。我想避免使用emit,on,watch,传递回调等。我只想能够对自定义指令执行[input type = checkbox ng-model = ngModel]而不是输入。
Basically, I want to be able to pass in ng-model from a parent directive to a child directive. I could just in a 2-way binded value, but then I wouldn't be able to use a ng-change in the parent directive on the child element. I could also use ng-click, but this wouldn't work with a non-clicking change (such as a text area instead of a checkbox). So I'm wondering if there's a way to allow a custom directives to have a ng-model/ng-change pair similar to how inputs, buttons, text areas and other html elements can. I want to avoid using emits, ons, watches, passing callbacks, etc. I just want to be able to do [input type="checkbox" ng-model="ngModel"] on a custom directive instead of input.
父模板
<child ng-model="x" ng-change="x()"></toggle>
父母指令
$scope.x = function() {console.log('hi')};
子模板
<div>
<input type="checkbox" ng-model="ngModel">
</div>
儿童指令
$scope.ngModel = $element.controller('ngModel');
我的角度版本为1.4.8 btw。
My angular version is 1.4.8 btw.
谢谢:)
推荐答案
与@georgeawg答案几乎相同,但使用指令方法(由于 component
是在1.5+版本中引入的,但作者的版本为1.4。 8):
Almost the same as @georgeawg answer, but using directive method (since component
was introduced in 1.5+, but author has 1.4.8):
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function MyCtrl($scope) {
}])
.directive('inputComponent', [function () {
var myDirective = {
restrict: 'E',
require: 'ngModel',
templateUrl: "checkboxComponent.html",
link : function(scope, element, attrs, ngModelCtrl){
scope.updateModel = function(ngModel) {
ngModelCtrl.$setViewValue(ngModel);
}
}
}
return myDirective;
}]);
fieldset {
margin-top: 1em;
}
<script src="//code.angularjs.org/1.4.8/angular.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input-component ng-model="value"
ng-change="value2=value"></input-component>
<fieldset>
<p>value = {{value}}</p>
<p>value2 = {{value2}}</p>
</fieldset>
</div>
<script type="text/ng-template" id="checkboxComponent.html">
<div>
<input type="text" ng-model="ngModel" ng-change="updateModel(ngModel)" />
</div>
</script>
</div>
这篇关于如何向组件添加ng-model功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!