creating angular-js directive that updates ng-model

Question

I am trying to create a directive that wraps the twitter typeahead plugin. What I have so far is:

HTML:

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

I want the value for 'participant' to be updated when I select something on the typeahead. The typeahead itself works properly, but I can't capture the selected value. Below is the 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.
     }
  };
});

I'm obviously missing something fundamental when it comes to AngularJS. Any help would be greatly appreciated!

EDIT **

I found the solution. I am clueless sometimes:

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;
    });
  })            
    }
  };
});

luacassus · Accepted Answer · 2013-08-21 08:59:20Z

21

You could require ngModel controller inside the directive. It will give you an access to the model controller inside the link function, see http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

Here you can find an example how to use it the real life http://suhairhassan.com/2013/05/01/getting-started-with-angularjs-directive.html#.UhSdDOZdXUE

answered Aug 21, 2013 at 8:59

luacassus

6,7502 gold badges45 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2205763 Over a year ago

Thank you! I was overcomplicating the whole thing, and I've learned something from banging my head over this.

Dmitri Zaitsev · Accepted Answer · 2015-05-04 04:32:45Z

0

The twitter Typeahead project seems to be abandoned.

But you can use the Typeahead Angular directive from the Angular UI Bootstrap library that is being actively maintained as of now.

answered May 4, 2015 at 4:32

Dmitri Zaitsev

14.2k12 gold badges79 silver badges115 bronze badges

Collectives™ on Stack Overflow

creating angular-js directive that updates ng-model

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related