Angular 1.6 Componentからng-modelを入力要素に渡す方法

入力タグのラッパーであるAngular 1.6コンポーネントを作成しようとしています。私は先行型またはオートコンプリートを作成しています。私はhtmlでng-modelを使用してコンポーネントを作成しなければなりません。それは問題ありませんが、ng-modelを子入力エレメントで使用します。コンポーネントでは、要素を使用する必要があり、ディレクティブのように属性タグを使用することはできません。私は何をしようとしているのかを説明するコードペンを作成しました。Angular 1.6 Componentからng-modelを入力要素に渡す方法

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

Iは、入力要素の値を更新するために、ngControllerを使用したいです。コードペンで、入力を入力すると、バインドされたモデルデータが入力要素の下に表示されます。

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>

出典

2017-04-05 user1007983

私はかなりうまく動作しますが、私は他の誰かがよりよい解決策を持っているかどうかを知りたいの問題への解決策を持っている：ここでは

コードがあります。

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>

出典

2017-04-05 19:10:26 user1007983

Angular 1.6 Componentからng-modelを入力要素に渡す方法

答えて

関連する問題