CODEWITHSUNDEEP
javascriptangularjsangularjs-directivedirective
Kev84
Kev84

Reputation: 837

Unable to call directive linked method if using isolated scope

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

Upvotes: 0

Views: 150

Answers (1)

Jim Buck
Jim Buck

Reputation: 2444

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.

Upvotes: 1

Related Questions