如何將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