web-dev-qa-db-fra.com

création de la directive angular-js qui met à jour le modèle ng

J'essaie de créer une directive qui enveloppe le plugin Twitter typeahead. Ce que j'ai jusqu'ici c'est:

HTML:

<input ng-Twitter-typeahead type="text" ng-model="participant" data="exampleData" />
{{ participant }}

Je souhaite que la valeur de 'participant' soit mise à jour lorsque je sélectionne un élément dans la tête de saisie. La tête de frappe elle-même fonctionne correctement, mais je ne peux pas capturer la valeur sélectionnée. Voici le javascript:

var app = angular.module('myApp', [])
app.directive('ngTwitterTypeahead', function () {
  return {
    restrict: 'EA',
    scope: {
      data: '='
    },
    link: function ($scope, $element, $attrs) {
      $element.typeahead($scope.data);

      $element.bind('typeahead:selected', function(obj, datum) {        
         // I really don't know how to do this part
         // the variable 'datum' is what I want to be passed to ng-model
         // I tried things like:
            // Including the ngModelController and typing:
            // ngModel.$setViewValue(datum)
            // but that didn't work.
     }
  };
});

Il me manque évidemment quelque chose de fondamental en ce qui concerne AngularJS. Toute aide serait grandement appréciée!

MODIFIER **

J'ai trouvé la solution. Je suis désemparé parfois:

angular.module('siyfion.ngTypeahead', [])
  .directive('ngTypeahead', function () {
    return {
    restrict: 'C',
    scope: {
      datasets: '=',
  ngModel: '='
    },
    link: function ($scope, $element, $attrs) {
      $element.typeahead($scope.datasets);      

      $element.bind('typeahead:selected', function(obj, datum) {        
    $scope.$apply(function() {
     $scope.ngModel = datum;
    });
  })            
    }
  };
});
angularjsangularjs-directive
20
user2205763

Vous pourriez avoir besoin du contrôleur ngModel dans la directive. Cela vous donnera un accès au contrôleur de modèle dans la fonction link, voir http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

Ici vous pouvez trouver un exemple d'utilisation de la vie réelle http://suhairhassan.com/2013/05/01/getting-started-with-angularjs-directive.html#.UhSdDOZdXUE

21
luacassus

Le projet Twitter Typeahead semble être abandonné. 

Mais vous pouvez utiliser la directive Typeahead Angular à partir de la bibliothèque de démarrage Angular de l'interface utilisateur qui est actuellement maintenue activement.

0
Dmitri Zaitsev