Unable to call directive linked method if using isolated scope

Question

hi Can someone please kindly explain to me what i'm missing here?

i created a simple test directive attribute, with "link". Without an isolated scope, i can call the method within the link via ng-click

but once i added an isolated scope, it doesn't work.

 <a test1 class="btn btn-default pull-right" form="PassedIn" ng-click="omg()">
     <span class="glyphicon glyphicon-plus" data-tooltip="New" data-tooltip-placement="left"></span>
 </a>
 <a test2 class="btn btn-default pull-right" view-model="10" ng-click="omg2()">
     <span class="glyphicon glyphicon-plus" data-tooltip="New" data-tooltip-placement="left"></span>
 </a>

Directives:

.directive('test1', function() {
    return {
      restrict: 'A',
      scope: {
        form: '=form'
      },
      link: function($scope, element, attrs) {
        $scope.omg = function() {
          alert($scope.form);
        };
      }
    };
  })
  .directive('test2', function() {
    return {
      restrict: 'A',
      link: function($scope, element, attrs) {
        $scope.omg2 = function() {
          alert('hello2');
        };
      }
    };
  });

http://plnkr.co/edit/CU96ieef4iNwWmccne4t?p=preview

I am pretty sure its something to do with scope, but can someone please explain?

And also why my directive with isolated scope call the method from Another directive's link (I made both methods the same name).

.directive('test1', function() {
    return {
      restrict: 'A',
      scope: {
        form: '=form'
      },
      link: function($scope, element, attrs) {
        $scope.omg = function() {
          alert($scope.form);
        };
      }
    };
  })
  .directive('test2', function() {
    return {
      restrict: 'A',
      link: function($scope, element, attrs) {
        $scope.omg = function() {
          alert('hello2');
        };
      }
    };
  });

http://plnkr.co/edit/IEiDeV9Es6zigGxxk67s?p=preview

Thanks, Kevin

Your question is pretty similar to this [SO question](http://stackoverflow.com/questions/16881478/how-to-call-a-method-defined-in-an-angularjs-directive). I think the answers there will help to understand what's going on and how you can fix it. — AWolf, Sep 02 '15 at 20:54

score 1 · Accepted Answer · answered Sep 02 '15 at 20:44

When you specify an isolated scope that directive will get a brand new scope that is only used by that directive. Likewise when you do not specify a scope, the parent scope is inherited.

The way you wrote your ng-click you will only be able to access methods on the parent scope (omg2 in your case).

In order to properly handle the click event something like this should do:

.directive('test1', function () {
    return {
        restrict: 'A',
        compile: function ($element, attr) {
            return function customDirectiveClickHandler(scope, element) {

                // Do standard setup here...

                element.on('click', function (event) {
                    scope.$apply(function(){
                        // All click code goes here...
                        alert('hello2');
                    });
                });
            };
        }
    };
});

You can also see how Angular actually handles ng-click (and other events) by looking at the source code.

Unable to call directive linked method if using isolated scope

1 Answers1