如何将ng-model从Angular 1.6 Component传递给input元素
[英]How to pass ng-model from Angular 1.6 Component to input element
问题描述
I am trying to create an Angular 1.6 component that is a wrapper for an input tag. 
我正在尝试创建一个Angular 1.6组件，它是输入标记的包装器。 I am creating a type ahead or autocomplete. 我正在创建一个提前类型或自动完成。 I have to use ng-model in the html to create the component and that is fine, but I want that ng-model used in the child input element. 我必须在html中使用ng-model来创建组件，这很好，但我想要在子输入元素中使用ng模型。 With a component you have to use an element and can't use attribute tag like directives use. 对于组件，您必须使用元素，并且不能使用类似指令的属性标记。 I have created a code pen to illustrate what I am trying to do. 我已经创建了一个代码笔来说明我想要做的事情。
http://codepen.io/patrickliechty/pen/GWLZeX?editors=1011
I want to use ngController to update the value in the input element. 我想使用ngController更新input元素中的值。 In the code pen, if you type in the input, you will see the bound model data show up below the input element. 在代码笔中，如果输入输入，您将看到绑定的模型数据显示在输入元素下方。
Here is the code: 这是代码：
angular.module('app', ['EntryField']); angular.module('app').controller('DataController', ['$scope', function($scope) { $scope.fieldDataArray = [{"label": "First Name", "content": ""}, {"label": "Last Name", "content": ""}]; console.log("$scope.fieldDataArray: ", $scope.fieldDataArray) }]); angular.module('EntryField', []).component('customAutoComplete', { template: '<input type="text" name="input" ng-model="$ctrl.ngModelController.$modelValue" autocomplete="off"/><br>[{{$ctrl.ngModelController.$viewValue}}]', require: { ngModelController: "ngModel" }, bindings: {}, controller: 'CustomAutocompleteController' }); angular.module('EntryField').controller('CustomAutocompleteController', CustomAutoController); CustomAutoController.$inject = ['$scope', '$element']; function CustomAutoController($scope, $element) { let ctrl = this; ctrl.$onInit = function() { ctrl.ngModelController.$parsers.unshift(function (inputValue) { handleInputUpdate(inputValue); }); } function handleInputUpdate(inputValue) { //Do autocomplete functionality } }
<html ng-app="app"> <head></head> <body> <div>Angular 1.x Auto Complete</div> <div ng-controller="DataController"> <div ng-repeat="fieldData in fieldDataArray"> <div>{{fieldData.label}}</div> <custom-auto-complete ng-model="fieldData.content"></custom-auto-complete> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> </body> </html>
1 个解决方案
解决方案1
0 2017-04-05 19:10:26
I have a solution to the problem that works pretty well but I would like to know if someone else has a better solution. 我有一个问题的解决方案很好，但我想知道其他人是否有更好的解决方案。
var app = angular.module('app', ['EntryField']); app.controller('DataController', ['$scope', function($scope) { $scope.fieldDataArray = [{ "label": "First Name", "content": "" }, { "label": "Last Name", "content": "" }]; console.log("$scope.fieldDataArray: ", $scope.fieldDataArray); }]); angular.module('EntryField', []); angular.module('EntryField').component('customAutoComplete', { template: '<input type="text" name="input" ng-model="$ctrl.fieldData.content" autocomplete="off"/><br>[{{$ctrl.fieldData.content}}]', bindings: { fieldData: "=" }, controller: function($element, $timeout) { let ngModelController; this.$postLink = function() { if (!ngModelController) { ngModelController = angular.element($element.find('input')).controller('ngModel'); ngModelController.$parsers.unshift(function(inputValue) { handleInputUpdate(inputValue); return inputValue; }); function handleInputUpdate(inputValue) { console.log("!!!!!!!!!!!!!!!!!Got some input: ", inputValue); } } } } });
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script> </head> <body> <div ng-controller="DataController"> <div ng-repeat="fieldData in fieldDataArray"> <div>{{fieldData.label}}</div> <custom-auto-complete field-data="fieldData"></custom-auto-complete> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.