Using ng-blur in custom directive

Question

I am having problems with using ng-blur in a custom directive. What I want is to be able to make a component that can handle any type of function sent into the ng-blur attribute on the directive.

Here is the directive example:

<az-dir ng-blur="change()" lid="test" ng-model="obj.test"></az-dir>

Javascript directive

app.directive('azDir', azDir);
function azDir() {
  return {
    restrict: 'E',
    scope: {
      ngModel: '=',
      ngBlur: '=',
      lid: '@'
    },
    templateUrl: 'directive.html',
    replace: true,
    require: 'ngModel'
  };
}

Simple angular controller:

var app = angular.module('ashtest', []);

app.controller('TopCtrl', ['$scope',
  function($scope) {

    $scope.obj = {
      test: "Ashkan"
    };

    $scope.change = function() {
      $scope.obj.test = "changedThis";
    }


  }
]);

My Plunker Sample

score 4 · Accepted Answer · edited May 23 '17 at 12:15

4

ngBlur: '&',

explaining in:

"@" ( Text binding / one-way binding )
"=" ( Direct model binding / two-way binding )
"&" ( Behaviour binding / Method binding )

What is the difference between '@' and '=' in directive scope in AngularJS?

edited May 23 '17 at 12:15

Community

1
1

answered Nov 19 '15 at 09:32

Ágoston Székely

242
1
10

Try it on my plunker, it doesn't trigger if you use '&' – Ashkan Hovold Nov 19 '15 at 09:54
Works for me this way – Ágoston Székely Nov 19 '15 at 10:31
Awesome! ng-blur="ngBlur()" that was what I was missing. Thanks! :) – Ashkan Hovold Nov 19 '15 at 10:45

Using ng-blur in custom directive

1 Answers1