如何将ng-model从Angular 1.6 Component传递给input元素

Question

我正在尝试创建一个Angular 1.6组件，它是输入标记的包装器。 我正在创建一个提前类型或自动完成。 我必须在html中使用ng-model来创建组件，这很好，但我想要在子输入元素中使用ng模型。 对于组件，您必须使用元素，并且不能使用类似指令的属性标记。 我已经创建了一个代码笔来说明我想要做的事情。

http://codepen.io/patrickliechty/pen/GWLZeX?editors=1011

我想使用ngController更新input元素中的值。 在代码笔中，如果输入输入，您将看到绑定的模型数据显示在输入元素下方。

这是代码：

 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>

Answer 1

我有一个问题的解决方案很好，但我想知道其他人是否有更好的解决方案。

 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>

如何将ng-model从Angular 1.6 Component传递给input元素

问题描述

1 个解决方案

解决方案1
0 2017-04-05 19:10:26

如何将ng-model从Angular 1.6 Component传递给input元素

问题描述

1 个解决方案

解决方案1 0 2017-04-05 19:10:26

解决方案1
0 2017-04-05 19:10:26