Angular: Empty Fiddle

http://angularjs.org/

by ptitgraig

HTML

<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
<div ng-controller="MyCtrl as vm">
  <pre>{{vm.system}}</pre>
  <input ng-model="vm.path" pf-autocomplete hourra="hourra" />
  Le chemin est : {{vm.path}}!<br/>
  <span class="class" ng-change="change()">{{hourra}}</span>
  <pre ng-show="vm.isListNotEmpty">{{vm.list}}</pre>
  <pre>{{vm.isListNotEmpty}}</pre>
</div>

CSS

.class {
  background-color:#fff;
  color:#f60;
}

JavaScript

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function(){
	var vm = this;
  vm.path = '';
  vm.system = 'UNIX';
  vm.list = [];
  vm.isListNotEmpty = vm.list.length > 0;
});
myApp.factory('myService', function(){
	var service;
  service = {
  	getInfos: getInfos
  }
  return service;
  
  function getInfos() {
  	// ici on pourrait faire un appel HTTP
  	return ['/applis/data', '/applis/data/bonjour'];
  }
});
myApp.directive('pfAutocomplete', function(myService){
    return {
        restrict: 'A',
        scope: {
        	hourra : '='
        },
        link: function(scope, elem, attrs){
            elem.bind("keyup", function(){
                //scope.log.push('called');
                console.log(elem[0].value);
                if (elem[0].value.substr(-2) === '/ ') {
                	scope.hourra = true;
                  // supprimer le dernier [espace]
									elem[0].value = elem[0].value.trim();
                  scope.list = myService.getInfos();
                } else {
                	scope.hourra = false;
                }
                scope.$digest(); 
            });
        }
    };
});