Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

creating angular-js directive that updates ng-model

Tags:

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;
    });
  })            
    }
  };
});
like image 506
user2205763 Avatar asked Aug 21 '13 08:08

user2205763


People also ask

Is NG-model an AngularJS directive?

ngModel is a directive which binds input, select and textarea, and stores the required user value in a variable and we can use that variable whenever we require that value.

Can we create custom directive in AngularJS?

AngularJS allows you to create custom directives with which it becomes easier to encapsulate and simplify DOM manipulation in AngularJS. These directives extend the HTML functionality.

What is [( ngModel )] in Angular?

The ngmodel directive binds the value of HTML controls (input, select, textarea) to application data. With the ng-model directive you can bind the value of an input field to a variable created in Angular. The binding goes both ways.

What is difference between ng-model and Ng bind directive?

ngModel usually use for input tags for bind a variable that we can change variable from controller and html page but ngBind use for display a variable in html page and we can change variable just from controller and html just show variable.


1 Answers

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

like image 107
luacassus Avatar answered Sep 20 '22 21:09

luacassus