Below is the code snippet for my controller:
$http.get(config.url+'/api/employees-suggestion/??token=' + currentUser.token + '&filterEmployee='+ "10000191")
.then(function(response) {
console.log(response);
$scope.id_list = [
{employeeName: 'Hello'},
];
console.log("id_list="+$scope.id_list);
}, function(response) {
}
)
I am looking to access the value of '$scope.id_list' and utilize it in an external JavaScript file (which serves as a custom directive for ionic-autocomplete). Here is the directive code:
angular.module('autocomplete.directive', [])
.directive('ionicAutocomplete',
function ($ionicPopover) {
var popoverTemplate =
'<ion-popover-view style="margin-top:5px">' +
'<ion-content>' +
'<div class="list">' +
'<a href="#/tab/badgeboard" class="item" ng-repeat="item in id_list | filter:inputSearch" ng-click="selectItem(item)">{{item.employeeName}}</a>' +
'</div>' +
'</ion-content>' +
'</ion-popover-view>';
return {
restrict: 'A',
scope: {
params: '=ionicAutocomplete',
inputSearch: '=ngModel'
},
link: function ($scope, $element, $attrs) {
var popoverShown = false;
var popover = null;
$scope.id_list = $scope.params.id_list;
//Add autocorrect="off" so the 'change' event is detected when user tap the keyboard
$element.attr('autocorrect', 'off');
popover = $ionicPopover.fromTemplate(popoverTemplate, {
scope: $scope
});
$element.on('focus', function (e) {
if (!popoverShown) {
popover.show(e);
}
});
$scope.selectItem = function (item) {
$element.val(item.display);
popover.hide();
$scope.params.onSelect(item);
};
}
};
}
{{item.employeeName}} does not display anything in the pop-over since 'id_list' is empty.
If I add the following code outside of the .then(), everything works fine and {{item.employeeName}} displays the employee names in the pop-over:
$scope.id_list = [
{employeeName: 'Hello'},
];
This is the HTML code (view) which contains an input field that triggers the drop-down pop-over:
<input type="text" ionic-autocomplete="{id_list: id_list, onSelect:onSelect}" placeholder="Search ?" ng-model="search">
I attempted using $rootScope but was unsuccessful. Any insights on what mistake I might be making and how to resolve it?