jun*_*var 1 angularjs angularjs-directive angularjs-ng-change angularjs-ng-model angularjs-components
基本上,我希望能够将ng-model从父指令传递给子指令.我可以只使用双向绑定值,但是后来我无法在子元素的父指令中使用ng-change.我也可以使用ng-click,但这不适用于非单击更改(例如文本区域而不是复选框).所以我想知道是否有一种方法允许自定义指令具有类似于输入,按钮,文本区域和其他html元素的ng-model/ng-change对.我想避免使用emits,ons,watch,传递回调等.我只是希望能够在自定义指令而不是输入上执行[input type ="checkbox"ng-model ="ngModel"].
父模板
<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.
谢谢 :)
ng-model组件添加功能使用单向<输入进行输入并使用ngModelController API进行输出:
app.component("checkboxComponent", {
bindings: { ngModel: '<' },
require: { ngModelCtrl: 'ngModel' },
template: `
<input type=checkbox ng-model='$ctrl.ngModel'
ng-change="$ctrl.ngModelChange()" />
`,
controller: function() {
this.ngModelChange = () => {
this.ngModelCtrl.$setViewValue(this.ngModel);
};
}
})
该组件使用单向绑定进行输入和$setViewValue输出.使用此方法,ng-change作品和组件可以用作表单元素:
<form name="form1">
<checkbox-component name="input1" ng-model="vm.formData.input1"
ng-change="vm.inp1Change()">
</checkbox-component>
</form>
有关更多信息,请参阅
angular.module("app",[])
.component("checkboxComponent", {
bindings: { ngModel: '<' },
require: { ngModelCtrl: 'ngModel' },
template: `
<fieldset>
<h3>Checkbox Component</h3>
<input type=checkbox ng-model='$ctrl.ngModel'
ng-change="$ctrl.ngModelChange()" />
Checkbox
</fieldset>
`,
controller: function() {
this.ngModelChange = () => {
this.ngModelCtrl.$setViewValue(this.ngModel);
};
}
})<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
<checkbox-component ng-model="value"
ng-change="value2=value">
</checkbox-component>
<fieldset>
<p>value = {{value}}</p>
<p>value2 = {{value2}}</p>
</fieldset>
</body>| 归档时间： |
|
| 查看次数： |
3283 次 |
| 最近记录： |