Mou*_*ssa 25 javascript angularjs
是否可以将ng-model与组件一起使用?我想将范围变量绑定到具有ng-model的组件.我抨击了我的问题.我希望将my-input组件绑定到范围userData.name中的变量.
我正在使用Angular JS 1.5.6组件,并希望避免使用指令.
<body ng-controller="MyCtrl">
<div class="container">
<h2>My form with component</h2>
<form role="form">
<div class="form-group">
<label>First name</label>
<my-input placeholder="Enter first name" ng-model="userData.name"></my-input>
</div>
</form>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
jcu*_*bic 36
您可以使用此代码:
function myInputController($scope) {
var self = this;
this.$onInit = () => {
this.ngModel.$render = () => {
self.model = self.ngModel.$viewValue;
};
$scope.$watch(function() { return self.model; }, function(value) {
self.ngModel.$setViewValue(value);
});
};
}
module.component('myInput', {
require: {
ngModel: '^ngModel'
},
template: '<input ng-model="vm.model"/>',
controller: myInputController,
controllerAs: 'vm'
};
Run Code Online (Sandbox Code Playgroud)
mas*_*tko 11
我已经为你修好了那个傻瓜.
您的参数名称必须与组件中的名称相对应.您应该在组件中使用camelCased名称,并在模板中使用kebab.例:
bindings: {
myPlaceholder: '@',
myModel:'='
}
<my-input my-placeholder="Enter first name" my-model="userData.firstName">
Run Code Online (Sandbox Code Playgroud)
关于使用ng-model的问题 - 您可以在组件中定义任何参数.在这种情况下,参数的名称应为ngModel.
| 归档时间: |
|
| 查看次数: |
16926 次 |
| 最近记录: |