Директива Dynamic Autocomplete

Question

У меня возникли проблемы с передачей динамических данных по моей автозаполненной директиве angularjs, которая сделана из автозаполнения jquery-ui. Вот мой текущий код:

HTML:

<div ng-app="peopleApp"> 
    <div ng-controller="indexController"> 
     <label class="input-group-addon input-label">Search:</label> 
     <input class="form-control input-form" id="search" type="text" placeholder="Search here..." auto-complete names="names"> 
     <button ng-click="change()">Change</button> 
    </div> 
</div> 

JS:

var peopleApp = angular.module('peopleApp', []); 


peopleApp.controller('indexController', function($scope, $http, $rootScope, $controller){ 
    $http.post(domainName+url) 
    .then(function(response){ 
     data = response.data.data; 
     $scope.names = data.map(function(obj){ var rObj = []; rObj.push(obj['rank_code']); rObj.push(obj['rank_description']); return rObj; }); 
    }); 

    $scope.change = function(){ 
     $scope.names = ["hnnnnn", "billlll"]; 
    } 
}); 


peopleApp.directive('autoComplete', function(){ 
    return { 
     scope: {names: '='}, 
     link: function(scope, element, attrs){ 
      // alert(JSON.stringify(element)); 
      attrs.$observe('names', function(val){ 
       // scope.info = val; 
       alert(val); 
       scope.names = val; 
      }); 
      element.autocomplete({ 
       source: scope.names, 
       select: function() { 
        // alert('dean'); 
        // iElement.trigger('input'); 
       }, 
       // Sets the min of characters before activating dropdown 
       minLength:2 
      }); 
     } 
    } 
}); 

Прежде всего, данные, которые извлекаются из API не интегрируется в автозаполнения. Во-вторых, я хочу, чтобы при нажатии кнопки на автозаполнении будут также интегрированы переменные $ scope.names.

Answer 1

Рабочее решение с jQuery autocomplete.

Живой пример на jsfiddle.

function DefaultCtrl($scope) { 
 
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"]; 
 
    $scope.addName = function() { 
 
    $scope.names.push($scope.name); 
 
    } 
 
} 
 

 
angular.module('MyModule', []) 
 
.controller('DefaultCtrl',DefaultCtrl) 
 
.directive('autoComplete', function($timeout) { 
 
    return { 
 
    restrict: "A", 
 
    scope: { 
 
     uiItems: "=" 
 
    }, 
 
    link: function(scope, iElement, iAttrs) { 
 
     scope.$watchCollection('uiItems', function(val) { 
 
     console.log(val); 
 
     iElement.autocomplete({ 
 
      source: scope.uiItems, 
 
      select: function() { 
 
      $timeout(function() { 
 
       iElement.trigger('input'); 
 
      }, 0); 
 
      } 
 
     }); 
 
     }); 
 

 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> 
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css" rel="stylesheet" type="text/css"> 
 
<div ng-app='MyModule'> 
 
    <div ng-controller='DefaultCtrl'> 
 
    <input auto-complete ui-items="names" ng-model="selected"> selected = {{selected}} 
 
    <br> 
 
    <input placeholder="add name" ng-model="name"> 
 
    <button ng-click="addName()"> 
 
     Add name 
 
    </button> 
 
    <pre>{{names|json}}</pre> 
 
    </div> 
 
</div>