Searchable Select giving error HTMLUnknownElement - please help

ionic-v1
1

Hi All,

I am getting an error which I am struggling to resolve.

I am trying to create a searchable select based on the following example:

working example in jsfiddle

However, I am getting the following error:

ement is [[object HTMLUnknownElement]] where it should be [[object HTMLKnownElement]]

If you look at the directive on the following:

link: function (scope, element, attrs, ngModel) {`

The element is unknown, where it should be related to the html defined.

Can you see what I have done wrong?

Thank you

I have the following code:

html file:

 <div ng-controller="searchSelectCtrl">
<div>
    <ion-search-select label="Language" label-field="nmPlaca" provider="lanuageData" ng-model="veiculo"/>
</div>
<button class="button button-block button-outline button-assertive" ng-click="testa()" ng-show="veiculo">
  					Teste
</button>
     <div>

     </div>
</div>

Controler.js

angular.module('app.controllers_custom', [ 'ionic','searchSelectDirective' ])

.controller('searchSelectCtrl',function($scope){
console.log('searchSelectCtrl');	   
    var data = [{id:1,nmPlaca:'IKC-1394'},{id:2,nmPlaca:'IKY-5437'},{id:3,nmPlaca:'IKC-1393'},{id:4,nmPlaca:'IKI-5437'},{id:5,nmPlaca:'IOC-8749'},{id:6,nmPlaca:'IMG-6509'}];
console.log('data: '+data);	   
    $scope.lanuageData = data;
    $scope.testa = function(){
      alert($scope.veiculo.nmPlaca);
    }
})

directives.js
> angular.module(‘app.directives’, )
>
> var searchSelectDirective = angular.module(‘searchSelectDirective’,);
> searchSelectDirective.directive(‘ionSearchSelect’, function(){
> console.log(‘searchSelectDirective’);
> ‘use strict’;
> return{
> restrict: ‘EAC’,
> scope: {
> label:‘@’,
> labelField:‘@’,
> provider:‘=’,
> ngModel: ‘=?’,
> ngValue: ‘=?’,
>
> },
> require: ‘?ngModel’,
> transclude : false,
> replace: false,
> template:
> ‘

’
> +‘’
> +‘{{label}}’
> +‘
’
> +‘’
> +‘’
> +‘’
> +‘’
> +‘’
> +‘’
> +‘’
> +‘
’
> +‘’
> +‘
’
> +‘’
> +‘
    ’
    > +‘
  • {{item[labelField]}}
    • ’
    > +‘
’
> +‘’
> +‘
’
> +‘
’
> ,
> link: function (scope, element, attrs, ngModel) {
>
> scope.ngValue = scope.ngValue !== undefined ? scope.ngValue :‘item’;
>
> scope.selecionar = function(item){
> ngModel.$setViewValue(item);
> scope.showHide = false;
> };
>
> element.bind(‘click’,function(){
> element.find(‘input’).focus();
> });
>
> scope.open = function(){
>
> scope.ngModel = “”;
> return scope.showHide=!scope.showHide;
> };
>
> scope.onKeyDown = function(){
> scope.showHide = true;
> if(!scope.ngModel){
> scope.showHide = false;
> }
> }
>
> scope.$watch(‘ngModel’,function(newValue){
> if(newValue)
> element.find(‘input’).val(newValue[scope.labelField]);
>
> });
> },
> }; });