AngularJS - Same level directives mistaking same name methods

Question

I have two directives: directiveA and directiveB, hanging from the same module in my AngularJS application. They are called at the same level in the same HTML template, so we could say they are brothers.

<directive-a>
<directive-b>

Both of them have an own method hanging from its scope, like this:

$scope.clickOkey = function () {
       ... whatever
     };

They both have a 'clickOkey' method, but their behaviours are different. My problem comes out when I try to call the 'clickOkey' of directiveA from directiveA's template. It executes the 'clickOkey' from directiveB.

Inside directiveA's own template:

<label ng-click="clickOkey()">Okey</label>

They are placed at same level so there it shouldn't be way for them to share their $scope or misunderstanding methods.

Also, is important to say that if I change the method's name to 'clickOkeyA', for example, it takes the right method, so the template can access to its scope without problems.

What am I missing? Thanks for your help!

Edit: Both directives are isolated and have a controller, and inside each one of them is defined a 'clickOkey' method. There are two methods with the same name.

Both directives are like this:

angular.module('myModule').directive('directiveA', function () {
    return {
        restrict: 'AE',
        templateUrl: '/whatever.html',
        controller: function ($scope, $http, $rootScope) {

            $scope.clickOkey = function () {
               ... whatever
             };
        }
    }
});

you should isolate scope of both directive. by default, directive share parent scope. — dhavalcengg
– dhavalcengg, Commented Aug 21, 2015 at 9:12
Define controller in both directives so that method will be in their own isolated scope and will work properly. — Jay Shukla
– Jay Shukla, Commented Aug 21, 2015 at 9:16
Yes, they are isolated and both directives have controller defined. Inside both controllers is where the two 'clickOkey' methods are defined. — JorgeDLuffy
– JorgeDLuffy, Commented Aug 21, 2015 at 9:18

ThibaudL · Accepted Answer · 2015-08-21 09:28:27Z

1

You should add an isolated scope to your directives : https://docs.angularjs.org/guide/directive

For your directive it would be :

angular.module('myModule').directive('directiveA', function () {
  return {
    restrict: 'AE',
    templateUrl: '/whatever.html',
    scope : {},
    controller: function ($scope, $http, $rootScope) {

        $scope.clickOkey = function () {
           ... whatever
         };
    }
  }
});

edited Aug 21, 2015 at 9:28

answered Aug 21, 2015 at 9:17

ThibaudL

1,0099 silver badges16 bronze badges

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

4 Comments

JorgeDLuffy Over a year ago

That's exactly how it is, an isolated controller for each directive.

ThibaudL Over a year ago

In what you'v send it's missing the scope : {}, line

JorgeDLuffy Over a year ago

Okey, I missed that line of: "scope : {}," You're right, that was the problem. Now it's working. Thank you very much. Still I don't understand why "brother" directives share the same scope.

ThibaudL Over a year ago

You'r welcome ! They both share the parent scope in fact

Collectives™ on Stack Overflow

AngularJS - Same level directives mistaking same name methods

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related