function MyCtrl($scope) { // liste des patients, ceux présents ont inUnit à true $scope.patients = [ {id:0,text:'Jean Dupont',inUnit:true}, {id:1,text:'Charles Martin',inUnit:true}, {id:2,text:'Hubert Jung'}, {id:3,text:'Astrid Poitier'}, {id:4,text:'Marie Vilard'}, {id:5,text:'Gerard Jung'}, {id:6,text:'Andre Martin'}, {id:7,text:'Jean Benard'}, {id:8,text:'Francis Ebani'}, {id:9,text:'Roselyne Pinchon'}, {id:10,text:'Olivier Paderan'}]; // fonction pour détecter les patients présents $scope.isPatientInUnit = function(o) {return o.inUnit;}; // récupération de la valeur sélectionnée $scope.selectedPatient; } // déclaration de la directive angular.module('myApp', []).directive('finder', function ($timeout) { return { restrict:'E', replace:true, template:'<input type="hidden" style="width: 300px;"/>', // on récupére ici via les attributs du même nom les propriétés du scope parents // data <- patients // favorite <- isPatientInUnit scope: { data: '=', favorite: '='}, link:function (scope, element, attrs, ctrl) { // affectation de select2 a la balise // on le met dans un timeout pour que // l'affectation soit faire après la compilation AngularJS $timeout(element.select2({ placeholder: "Rechercher un dossier", query: function (query) { var results = {results: _.filter(scope.data,scope.favorite)}; if (query.term.length > 2) { results.results = _.filter(scope.data,function(o) {return o.text.toLowerCase().indexOf(query.term) != -1;}); } query.callback(results); } }),0); // mis à jour du modèle sur l'évènement 'change' element.bind("change", function(){ scope.$parent[attrs.selection] = _.find(scope.data, function(o) { return o.id == element.val()}); scope.$apply(); }); } } })
<div ng-app="myApp"> <div ng-controller="MyCtrl"> <div> <finder data="patients" favorite="isPatientInUnit" selection="selectedPatient"></finder> </div> <br> <span>selection : {{selectedPatient.text}}</span> </div> </div>