How to pass a function inside a directive in AngularJS

Question

I have created on-blur directive for user that blurs out from the input field

<input type="text" on-blur="doSomething({{myObject}})">

myObject looks like:

myObject = {a : foo, b : bar ... }

this is how my directive currently looks like:

    myModule.directive('onBlur',function(){
    return {
        restrict: 'A',
        link: function(scope,element,attrs) {
            element.bind('blur',function(){
                console.log('blurrred');
            });

        }
    }
});

How do I execute the function doSomething({{myObject}}) when the blur event is triggered?

I've tried doing something like this that has failed to work:

...
            element.bind('blur',function(){
                console.log('blurrred');
                doSomething(object);
            });
...

ŁukaszBachman · Accepted Answer · 2013-03-11 12:57:40Z

2

Inside linking function you can call: scope.doSomething(). To evaluate expression you could do: scope.$eval(expression), to get access to scope objects simply use: scope.myObject.

Of course this is only true for directives not working in isolation.

answered Mar 11, 2013 at 12:57

ŁukaszBachman

33.8k11 gold badges68 silver badges74 bronze badges

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

Comments

Stewie · Accepted Answer · 2013-03-11 13:06:23Z

2

You ng-blur is missing scope.$apply. It has no reference to your callback function, and you callback function needs to be defined at current scope:

JS:

var app = angular.module('plunker', []);
app.controller('AppController',
    [
      '$scope',
      function($scope) {
        $scope.myObject = {a: 'foo', b: 'bar'};

        $scope.doSomething = function(item){
          console.log(item);
        };
      }
    ]
  );

app.directive('ngBlur', function() {
  return function( scope, elem, attrs ) {
    elem.bind('blur', function() {
      scope.$apply(attrs.ngBlur);
    });
  };
});

HTML:

<div ng-controller="AppController">
  <input ng-blur="doSomething(myObject)" />  
</div>

Working plunker.

edited Mar 11, 2013 at 13:06

answered Mar 11, 2013 at 13:01

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

Collectives™ on Stack Overflow

How to pass a function inside a directive in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related